PC端谈到自适应不大，无非是屏大屏小。但是针对移动端，自适应比较复杂。
两个问题：
1、设计稿是否一份，代码是否一份？
2、所有设备的兼容性是否完美？
自适应
设备太多，安卓和ios各种尺寸不同，怎样让页面随着尺寸大小进行缩放？
像素概念
https://github.com/jawil/blog/issues/21
(摘自以上链接内)
css像素：
image.png
比如我们缩写的px。1px等等就是css像素，逻辑像素也就是css像素。
设备像素：这个和硬件有关，显卡提供像素，是物理像素，一个像素点就是一个像素。而苹果的Retina屏幕，设备像素比是2，一个逻辑像素需要2个物理像素点来表示。
如上图，当设备像素比为1时，
2px*2px就是左下角所显示，当设备像素比为2时，2px*2px就是右下角所显示。同样大的地方，里面的物理像素点变得多了。设备像素比：css像素与物理像素的比值。
viewport
viewport的概念
viewport分哪几类？
分三类：layout viewport、visual viewport、ideal viewport。
viewport
背后蓝色的图就是layout viewport，如果没有width=device-width的话，这个庞大的页面放不下手机有限的窗口。
被裁减出来的就是visual viewport
手机的宽高组成的尺寸就是ideal viewport。
width=device-width做了什么事？
让大图的layout viewport= 手机的ideal viewport,这样的话就做到两个不同的窗口，大小是一样的。这样看起来页面铺满，并且大小是一样的。
rem
rem说明
root element也就是html的标签，所有的单位也就是rem单位的font-size计算的时候，是按照html根标签的尺寸来进行计算。
em: 相对于父级元素；
rem: 相对于html根标签。
如何做到自适应
如何做到自适应图1
左图是5s设计图，设计尺寸，这里的320是css像素，物理像素是 css像素*设备像素比，也就是说这个手机硬件提供的宽是640的物理像素比。
右图，设备像素比是3时，css像素是375，右图的物理像素是1125，左图的按钮大小是20px*20px，在大设备上要自适应，按照线性关系，20px*20px要变成一个倍数相乘，这个倍数就是1125/640，所以这个按钮在右图的大设备上就是(20px) * (1125/640)。
但是真正操作的时候不可能所有的都这样进行相乘。
基准像素就是html。不需要所有的设备都去除一下这个基本比例关系。
比如说左图的html的font-size: 40px;
到大尺寸下，font-size: 40px * 1125/640, 的出来一个70.1px的值，然后所有的单位都以rem来设计。这样就得出来一个完整的方案。
px2rem这种可配置插件所得，将设计稿上的css像素自动转换成rem来，这样就无须我们再一个个算了。
网友评论