网易实现
如果对viewport不理解请先点击上方链接；
blog.csdn.net/u012402190/…
网易适配基于iphone6为基准，设计图物理分辨率为750X1334；
实现方法如下：
- 1.依100px为设计图的基本字体大小；750/100=7.5rem;
- 2.根据公式：750/100=640/x=设计图物理分辨率/该分辨率下的字体大小；可以通过媒体查询获得不同大小分辨率下的跟字体大小；苹果6为准时x=50px;
- 3，添加viewport;width=device-width是关键.viewport有三种：
- layout viewport=document.documentElement.clientWidth(不设置vieport的时候，浏览器默认的为980px或者1024px)
- visual viewport=window.innerWidth(浏览器可视宽度)
- ideal viewport（理想宽度，不同设备的理想宽度不同，点击查询不同设备的理想视口viewportsizes.com/?filter=iph…）
meta意思是将ideal viewport= ideal viewport；
当前缩放值 = ideal viewport宽度 / visual viewport宽度
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- 4,，根据dpr = 设备物理像素 / 设备独立像素(css像素);对于苹果六：物理像素=750x1334px;设备独立像素375x667px;dpr=window.devicePixelRatio=2；理解为css的1px对应物理像素的2px; 具体实现：
-
在头部加入以后vieport=375px;根据 750/100=375/x得到x=50px=htmlFontSize;
-
底部总宽度为100%=750px=7.5rem;当设置width=7.5rem时在htmlFontSize=50px时总宽度为375px；刚好占满vieport
-
用工具测量底部tabbar高度100px=1rem;在htmlFontSize=50px时总宽度为375px;1rem=50px;
-
通过宽高德测量得出如下布局方案：设计图测量的像素/100就是我们转换后要使用的rem值；这样做法的好处是便于计算，不用使用sass或者postcss进行编译，就可以方便的进行计算。
-
解决1px问题，已经知道css中的1px在dpr=2时就代表了设计图上的2px；那么1px=0.01rem;从下图开出当想实现准确的1px时使用0.01rem得到的并不是1px;如果对1px要求不高可以采用0.01rem;对于对1px要求高的，我的解决方案是结合属性选择器。动态获取dpr给HTML设置data-dpr属性值，结合属性值选择器定义
[data-dpr="3"] li:nth-child(2) {
border-top: 0.3334px solid #ccc;
}
[data-dpr="2"] li:nth-child(2) {
border-top: 0.5px solid #ccc;
}
[data-dpr="1"] li:nth-child(2) {
border-top: 1px solid #ccc;
}
