移动端1px像素问题及解决办法
时间:2018-11-16
本文章向大家介绍关于移动端一像素线的解决方案,需要的朋友可以参考一下
引用了yo框架中的_border.scss(用来获取yo框架封装的border) 以及 variables.scss(用来获取媒体查询的规则)
1 border($border-width = 1px, $border-color = #ccc, $border-style = solid, $radius = 0) 2 // 为边框位置提供定位参考 3 position: relative; 4 5 if $border-width == null 6 $border-width: 0; 7 8 border-radius: $radius; 9 10 &::after 11 // 用以解决边框layer遮盖内容 12 pointer-events: none; 13 position: absolute; 14 z-index: 999; 15 top: 0; 16 left: 0; 17 // fix当元素宽度出现小数时,边框可能显示不全的问题 18 // overflow: hidden; 19 content: "\0020"; 20 border-color: $border-color; 21 border-style: $border-style; 22 border-width: $border-width; 23 24 // 适配dpr进行缩放 25 @media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx) 26 width: 100%; 27 height: 100%; 28 if $radius != null { 29 border-radius: $radius; 30 } 31 32 @media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49), (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49), (min-resolution: 144dpi) and (max-resolution: 239dpi), (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) 33 width: 200%; 34 height: 200%; 35 transform: scale(.5) 36 if $radius != null { 37 border-radius: $radius * 2; 38 } 39 40 @media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5), (min-device-pixel-ratio: 2.5),(min-resolution: 240dpi),(min-resolution: 2.5dppx) 41 width: 300%; 42 height: 300%; 43 transform: scale(.33333) 44 if $radius != null { 45 border-radius: $radius * 3; 46 } 47 48 transform-origin: 0 0;
省略点ellipsis的解决方案(支持多行)
1 wrap($is-wrap = true) 2 if $is-wrap == true 3 word-wrap: break-word; 4 word-break: break-all; 5 else 6 white-space: nowrap; 7 9 ellipsis($width = null, $line-clamp = 1) 10 overflow: hidden; 11 text-overflow: ellipsis; 12 width: $width; 13 if abs($line-clamp) > 1 14 // 要使得多行截取生效,display的值只能为-webkit-box 15 display: -webkit-box !important; 16 -webkit-line-clamp: $line-clamp; 17 flex-direction column 18 wrap() 19 else 20 wrap(false)
将上述代码放入styl文件中,就可以直接使用!
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例