1920px设计稿如何使用REM单位实现完美自适应？

基于1920px设计稿的REM自适应布局详解

许多前端开发者在学习REM自适应布局时，常常会遇到适配难题，尤其是在处理1920px设计稿时。本文将详细讲解如何利用REM单位，以1920px设计稿为例，构建灵活的响应式页面。

文章开头提到了一个计算方法：font-size = document.width / 10，以及css中盒子大小计算方法：(100/font-size) rem。这种方法并不完全精确。更准确的方案是将设计稿宽度作为基准。

精准的REM自适应方案

对于1920px的设计稿，我们应设置html的font-size为：calc(100vw / 19.2)。

这里，“19.2”是1920除以100的结果，它代表将1920px的设计稿宽度按比例缩放到视口宽度。100vw代表视口宽度，calc(100vw / 19.2) 计算出的font-size值确保每个CSS像素占据视口宽度的1/19.2。 这样，当视口宽度改变时，font-size也会动态调整，从而实现自适应。

CSS中REM单位的使用

在CSS中，我们可以直接使用REM单位定义元素大小。例如，设计稿中一个100x100px的盒子，其CSS代码如下：

.box {   width: 10rem;   height: 10rem; }

因为1rem等于10px（在1920px屏幕下，1rem = (100vw/19.2)/10 = 10px），所以10rem等于100px，完美匹配设计稿。 通过这种方法，我们可以轻松将设计稿的像素值转换为REM单位，实现跨屏幕的响应式布局。