Rem自适应布局详解：轻松解决新手困惑
许多前端新手在学习Rem自适应布局时常常感到迷茫，尤其是在不同屏幕尺寸下如何调整页面元素大小。本文将通过一个实际案例，详细讲解Rem自适应的正确实现方法，帮助您快速掌握这项技术。
问题： 假设设计稿宽度为1920像素，如何让页面在各种屏幕尺寸下都能完美适配？一种常见的方案是动态调整html的font-size，计算公式为：font-size = document.width / 10。如果设计稿中有一个100x100像素的盒子，CSS中宽度和高度该如何设置呢？这种方法是否正确？
错误的方案分析： 直接使用document.width / 10计算font-size并不准确，因为它忽略了设计稿的基准宽度。
立即学习“前端免费学习笔记（深入）”；
正确的Rem自适应实现： 正确的做法是将设计稿宽度（1920像素）作为基准。我们可以通过以下CSS代码设置html元素的font-size：
html {
font-size: calc(100vw / 19.2);
}其中，“19.2”是设计稿宽度1920除以100的结果。100vw代表视口宽度的100%。calc(100vw / 19.2)计算的结果是：每个CSS像素占视口宽度的1/19.2。 当视口宽度为1920像素时，html的font-size为100px。
对于设计稿中100x100像素的盒子，CSS代码如下：
.box {
width: 10rem;
height: 10rem;
}因为10rem在1920像素宽度的屏幕上等于100像素 (10 * 10px)。 这种方法确保了不同屏幕尺寸下，页面元素大小比例保持一致，从而实现了Rem自适应布局，让页面在各种设备上都能呈现最佳效果。
以上就是Rem自适应布局：设计稿宽度1920px，如何正确计算html的font-size及元素大小？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
164
收藏
