使用Rem布局实现自适应

之前写过一篇移动端适配的文章，很长，内容太多，看得容易凌乱，重新写个通熟易懂版的。 为什么要自适应？ 比如，对于一个移动端页面，设计师给的视觉稿画布宽 750，视觉稿中的一个黄色区块的尺寸是 702 x 300，并在画板中居中。我们希望在任何一个设备中的呈现比例都与视觉稿中一样，根据布局视口宽度等比缩放。 在移动端我们一般会设置布局视口宽度=设备宽度，即内容呈现的区域在设备屏幕内。 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 但不同设备的宽度不同，因而让布局视口的宽度也不同。比如 iPhone