在移动端实现一像素边框
2017-02-21 17:59
453 查看
由于分辨率 DPI 的差异,高清手机屏上的 1px 实际上是由 2×2 个像素点来渲染,有的屏幕甚至用到了 3×3 个像素点
所以 border: 1px 在移动端会渲染为 2px 的边框
虽然用户在实际使用的时候,很难发现这 1px 的差异,但是设计师往往会在这 1px 上较劲,这就产生了经典的 “一像素问题”
最简单的解决办法,就是用图片做边框,只是修改颜色不太方便。除此之外,还有两种常用的办法
一、transform:scale
使用伪类 :after 或者 :before 创建 1px 的边框,然后通过 media 适配不同的设备像素比,然后调整缩放比例,从而实现一像素边框
首先用伪类创建边框
然后通过媒体查询来适配
这种办法的边框并不是真正的 border,而是高度或者宽度为 1px 的块状模型,所以这种办法不能做出圆角,一般都用来画分割线
二、viewport
网页的内容都渲染在 viewport 上,所以设备像素比的差异,直接影响的也是 viewport 的大小
通过 js 获取到设备像素比,然后动态添加 <meta> 标签
所以 border: 1px 在移动端会渲染为 2px 的边框
虽然用户在实际使用的时候,很难发现这 1px 的差异,但是设计师往往会在这 1px 上较劲,这就产生了经典的 “一像素问题”
最简单的解决办法,就是用图片做边框,只是修改颜色不太方便。除此之外,还有两种常用的办法
一、transform:scale
使用伪类 :after 或者 :before 创建 1px 的边框,然后通过 media 适配不同的设备像素比,然后调整缩放比例,从而实现一像素边框
首先用伪类创建边框
.border-bottom{ position: relative; border-top: none !important; } .border-bottom::after { content: " "; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #e4e4e4; -webkit-transform-origin: left bottom; transform-origin: left bottom; }
然后通过媒体查询来适配
/* 2倍屏 */ @media only screen and (-webkit-min-device-pixel-ratio: 2.0) { .border-bottom::after { -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } } /* 3倍屏 */ @media only screen and (-webkit-min-device-pixel-ratio: 3.0) { .border-bottom::after { -webkit-transform: scaleY(0.33); transform: scaleY(0.33); } }
这种办法的边框并不是真正的 border,而是高度或者宽度为 1px 的块状模型,所以这种办法不能做出圆角,一般都用来画分割线
二、viewport
网页的内容都渲染在 viewport 上,所以设备像素比的差异,直接影响的也是 viewport 的大小
通过 js 获取到设备像素比,然后动态添加 <meta> 标签
<script type="text/javascript"> (function() { var scale = 1.0; if (window.devicePixelRatio === 2) { scale *= 0.5; } if (window.devicePixelRatio === 3) { scale *= 0.333333; } var text = '<meta name="viewport" content="initial-scale=' + scale + ', maximum-scale=' + scale +', minimum-scale=' + scale + ', width=device-width, user-scalable=no" />'; document.write(text); })(); </script>
相关文章推荐
- 移动端(手机)实现1像素下边框的方法
- 移动端(手机)1像素边框实现方法
- 移动端(手机)1像素边框真正实现
- 移动端一像素的边框问题
- css3 实现版像素边框
- 移动端Touch事件与H5-Canvas像素点检测实现刮刮乐
- 移动端如何真正实现1像素border
- 移动端1px边框实现
- 移动端1px边框的实现
- js 实现在移动端开发,解决不同手机像素大小的兼容问题
- 如何用css3实现半像素边框
- 在移动端实现1px的边框
- 移动端Retina屏实现1px的边框
- 7种方法实现移动端Retina屏幕1px边框效果
- 移动端1像素的边框
- 移动端1像素边框问题
- 移动端边框1px的实现
- 移动端1px边框实现
- 移动端1像素边框问题的解决方案
- 【H5开发基础】移动端1像素边框问题的解决方案