移动端1px
由于分辨率 DPI 的差异,高清手机屏上的 1px 实际上是由 2×2 个像素点来渲染,有的屏幕甚至用到了 3×3 个像素点
所以在手机上真正显示边框的时候不是1px像素,那问题来了,作为开发怎么能忍受有这样的问题出现,至此有几个解决方法,如下:
方法1,border-image
border-image是css3的属性可以用它引入1px的图片,这样就有了1px的边框。
**缺点:**不能随时变换变换的颜色,边框不能写圆角
方法2,transform:scale
使用伪元素:before,:after 实现1px像素,然后通过 media 适配不同的设备像素比,然后调整缩放比例,从而实现一像素边框,代码如下:
.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;
}
//在用media适配不同的设备像素比
/* 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);
}
}
这样的做法用于分割线较多,很少用在写某个盒子的边框上;
方法3,js动态加载meta
在页面加载时,写上一段js。代码如下:
<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>
这样也是不错的解决方法
**在一次开发中用到vux-ui这个前端组件里面有处理1px边框的问题,**方法如下
在你项目的App.vue引入,组件内不需要再重复引入。
<style lang="less">
@import '~vux/src/styles/1px.less';
</style>
用的时候直接在要用的盒子上加上相应的类名
类名有
- vux-1px-l 左边框
- vux-1px-r 右边框
- vux-1px-t 上边框
- vux-1px-b 下边框
- vux-1px-tb 上下边框
- vux-1px 全边框
vux-ui中的方法其实也是用伪元素写的,只不过是把伪元素的宽高都扩大了1倍即200%,然后在用transform缩放一半
content: " ";
position: absolute;
left: 0;
top: 0;
border-radius: 15px;
border: 1px solid #C7C7C7;
color: #C7C7C7;
width: 200%;
height: 200%;
-webkit-transform-origin: left top;
transform-origin: left top;
-webkit-transform: scale(0.5);
transform: scale(0.5);