1px像素问题（二）：解决方法

上一篇博文分析了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;
}