上一篇博文分析了1px像素问题的产生原因,
那这次就探讨一下解决方法。
解决方法有很多,根据项目环境和使用场景选择最合适的就行,下面整理了几种解决方式:
1、通过设置meta标签viewport
分析1px像素产生原因时,有说到meta标签设置的width=device-width,其实这也是产生1px像素问题的前提条件之一,无论你是rem适配方式还是媒体查询的响应式布局,你最终在375px的总宽度下,边框最小css单位也只能是1px,而750px的设计图里1px占1/750,375px里1px占1/375,比例大了一倍,视觉上肯定是粗了。
所以,如果设置content的width就等于设计图大小750px,然后通过动态设置maximum-scale值让网页整体缩放,就能实现效果了,这也是适配移动端不同屏幕大小的一种思路。
以iphoneX为例,
<meta name="viewport" content="width=750,initial-scale=1.0,maximum-scale=0.5">
这样就能让iphoneX完美还原750px的设计图了,maximum-scale的值就等于window.screen.width / 750,
不过这样设置后,在和其他content属性width值不同的页面间来回切换会产生横向及纵向滚动条,如果是公司同一项目里切换页面还好,一旦有和其他项目的跳转交互就会产生bug,谨慎使用。
2、通过transform: scale()缩放(推荐)
.div::after {
content: '';
width: 200%;
height: 200%;
position: absolute;
top: 0;
left: 0;
border: 1px solid #bfbfbf;
border-radius: 4px;
-webkit-transform: scale(0.5,0.5);
transform: scale(0.5,0.5);
-webkit-transform-origin: top left;
}