移动端Web适配的两种作法思路总结

时间 2019-11-10

标签移动 web 适配两种作法思路总结栏目无线繁體版

原文原文链接

看了几篇文章，理一下网易跟淘宝移动端适配的思路，主要是参考从网易与淘宝的font-size思考前端设计稿与工做流javascript

像素相关概念

物理像素(physical pixel)

一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操做系统的调度下，每个设备像素都有本身的颜色值和亮度值。css

其值也就是咱们常说的分辨率html

设备独立像素(density-independent pixel)

设备独立像素(也叫密度无关像素)，能够认为是计算机坐标系统中得一个点，这个点表明一个能够由程序使用的虚拟像素(好比: css像素)，而后由相关系统转换为物理像素。前端

简称dip，也能够称为CSS像素java

设备像素比(device pixel ratio)

设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系，它的值能够按以下的公式的获得：git

设备像素比 = 物理像素 / 设备独立像素 // 在某一方向上，x方向或者y方向

网易的作法

目的

css中使用的尺寸与设计稿保持一致，body的宽度设为屏幕宽度github

原理

将页面宽度定为屏幕宽度，经过设置html的font-size与使用rem来实现尺寸与设计稿一致web

思路

假设设计稿宽度为640px
那么以设计稿为准，设置body的宽度为640px
因为使用rem单位，所以须要设置html标签的font-size
为计算方便，取100px为参照，因此body的宽度为6.4rem
因为设备的dip!=设计稿宽度，所以font-size=deviceWidth/6.4
css尺寸为：设计稿标注尺寸/100

淘宝的作法

目的

页面大小与设计稿保持一致算法

原理

设置meta viewport中的scale保证页面大小与设计稿一致，使用remmarkdown

思路

meta viewport中device-width的算法为：设备的物理分辨率/(devicePixelRatio * scale)
而每台设备的devicePixelRatio都是已知的，可经过window.devicePixelRatio获取
JavaScript动态计算设置scale，包括initial-scale，maximum-scale，minimum-scale
动态设置html的font-size，为屏幕分辨率/10
css尺寸为：设计稿标注尺寸/html的font-size

关于font-size能不能使用rem的问题

流云诸葛在文章中说font-size不能使用rem，要用media query，而实际上，网易的font-size也是有用rem来做为单位的。

那么为何会说font-size不能使用rem呢？到底能不能用rem？

答案是能的。

说不能多是由于在网页中有可能使用了点阵字体，也叫位图字体，因为位图的缘故，点阵字体很难进行缩放。
这个概念与矢量字体相对应。

网上有给出对于文字使用px的缘由的文章

根据如下两个缘由，对于文字使用px：

在大屏设备但愿看到更多的文字

中文点阵最好是在12px，14px，16px这种尺寸，使用rem就会没法避免使用13px，15px尺寸，这样文字会显示的很奇怪

虽然如此，但没有使用点阵字体的话，在一些状况，好比在须要自适应的状况下，使用rem也是没问题的。

关于font-size的更新（2016-09-14 11:50）

前面说到font-size能不能使用rem，给出的答案是能。

可是通过一番摸索，这边我仍是建议字号用px来做为单位。

为何呢，除了点阵字体的缘由，咱们在使用rem时，在不一样设备的字体大小不同，而比较适合阅读的字号大小是14px或16px之类。

好比：iPhone5的设计稿是640px，那么根据网易的作法，html的font-size就是50px，那么咱们根据设计稿定义一段文本的font-size为0.16rem，换算成px就是0.16 * 50 = 8 px，这样，在4吋iPhone上看这段文本时，就会显得很小；若是设置成0.32rem，在4吋iPhone上看是正常了，可是在较大屏幕上看，又会显得太大。

还有一个缘由，使用rem最终是转换成px的，这样，转换后的px就有可能出现存在小数的状况，这个时候就可能出现1px的不对称。

所以咱们在给文本定义字号时仍是使用px，应对不一样设备，使用media query，或者像淘宝的那种作法，在html中加上data-dpr，算出当前设备的dpr，再根据不一样dpr来区分文本字号大小。

.a{
  font-size:12px;
}
[data-dpr="2"] .a{
  font-size: 24px;
}
[data-dpr="3"] .a{
  font-size: 36px;
}