css如何使用Rem布局实现自适应效果-木庄网络博客

本文摘自PHP中文网，作者V，侵删。

为什么要自适应？

比如，对于一个移动端页面，设计师给的视觉稿画布宽 750，视觉稿中的一个黄色区块的尺寸是 702 x 300，并在画板中居中。我们希望在任何一个设备中的呈现比例都与视觉稿中一样，根据布局视口宽度等比缩放。

在移动端我们一般会设置布局视口宽度=设备宽度，即内容呈现的区域在设备屏幕内。

1	`<meta name="viewport"` `content="width=device-width, initial-scale=1.0">`

但不同设备的宽度不同，因而让布局视口的宽度也不同。比如 iPhone 6 的布局视口宽度为 375， iPhone6 Plus 布局视口的宽度为 414。

（相关视频教程推荐：css视频教程）

对于给定的画布宽 750 的视觉稿，如果在布局视口宽度为 375 的 iPhone 6 设备上呈现，我们可以将视觉稿中元素的像素值除以 2，代码如下：

.box{
    width: 351px;
    height: 150px;
    margin-top: 40px;
    background: #F5A623;
}

那么在 iPhone 6 中的呈现如右图，与左图视觉稿布局一致。

但同样的代码，在 iPhone 6 Plus 中呈现的就不一样了，两侧间距变大。因为 iPhone 6 Plus 的布局视口比 iPhone 6 要宽，而矩形框的尺寸没有变，依然是 315 x 150。

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者