3分钟读懂移动端rem使用方法(推荐)

对于rem的使用方法和其背后的设计理念，这篇文章给出了详尽的解释。随着现代网页设计的多元化和复杂化，适配不同分辨率和设备成为了设计过程中的一大挑战。特别是在移动端，由于设备的屏幕尺寸各异，如何确保页面在各种设备上都能完美展示成为了一个关键问题。这篇文章提供了一个很好的解决方案，那就是使用rem作为设计的基础单位。

我们需要明白为什么选择使用rem。在移动端的网页设计中，我们希望页面元素在不同屏幕尺寸下都能自适应，保持一定的比例关系。传统的像素（px）单位无法满足这一需求，因为不同设备的屏幕分辨率不同，导致同样数量的像素在不同的设备上显示的大小也会不同。而rem作为一种相对单位，其大小是相对于根元素（html元素）的字体大小来计算的。这就给了我们很大的灵活性，可以根据不同的设备和屏幕大小来调整根元素的字体大小，进而控制rem的大小。这样，我们就可以确保页面元素在不同的设备上都能按照预期的比例关系来展示。

那么，如何使用rem呢？其实非常简单。你需要设定一个基准值，比如在设计稿中1rem等于多少像素。然后，在你的CSS代码中，使用rem来代替像素单位。这样，当你的设备屏幕尺寸发生变化时，由于rem是相对于根元素字体大小的相对单位，所以页面元素的大小也会相应地变化，从而保持一定的比例关系。这种设计方式使得页面在不同分辨率下都能完美展示，大大提高了用户体验。

使用rem也需要注意一些问题。最重要的一点就是如何确定1rem等于多少像素。这个值并不是固定的，而是需要根据设备和设计需求来设定的。在设计过程中，你可能需要根据不同的设备和屏幕大小来调整这个值。这就需要你具备一定的设计经验和技巧，以确保页面在各种设备上都能完美展示。

rem作为一种相对单位，为现代网页设计提供了一种很好的解决方案。通过合理地使用rem，我们可以确保页面在不同设备和屏幕尺寸下都能完美展示，提高用户体验。这篇文章对于rem的使用方法和设计理念进行了详细的介绍，对于学习和理解rem的使用具有很高的参考价值。特别是对于需要同时处理PC和移动端页面的开发者来说，这篇文章更是一个不可多得的宝典。计算rem尺寸：从设计稿到浏览器可视区域的自适应布局

在网页设计中，我们经常需要根据不同的屏幕尺寸和设计稿来调整rem尺寸，以实现更好的用户体验。那么，这个过程是如何进行的呢？让我们一起深入了解。

假设你有一个设计稿A，其宽度为640px。你设定了一个rem和px的比例B，例如1rem等于10px。你的目标是要在用户浏览网页时，使这个比例能够自适应不同屏幕大小。

用户浏览器的可视区域宽度我们称之为C。比如，用户的屏幕宽度是320px。那么，根据公式 B/A = D/C，我们可以计算出在当前屏幕宽度下，1rem所代表的像素值D。在这个例子中，D就等于5px。

在实际操作中，你需要在用户加载完网页后，设置html元素的font-size，也就是1rem的尺寸。由于用户的屏幕尺寸可能会变化，因此你需要考虑刷新这个尺寸。下面是一段示例代码：

```javascript

var fun = function(doc, win) {

var docEl = doc.documentElement,

resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';

// 当文档加载完毕或者窗口大小变化时重新计算rem尺寸

var recalc = function() {

var clientWidth = docEl.clientWidth;

if (!clientWidth) return; // 如果窗口宽度为0，则不进行任何操作

// 这里假设在640px设计稿的情况下，1rem等于设计稿中的字体大小（可以根据实际需要修改）

docEl.style.fontSize = 设计稿中的字体大小 (clientWidth / 设计稿宽度) + 'px'; // 动态设置html字体大小以适配屏幕宽度变化

};

// 添加事件监听器以确保代码可以在窗口大小变化时执行相应的操作

if (!doc.addEventListener) return; // 如果不支持事件监听则不执行后续操作

win.addEventListener(resizeEvt, recalc, false); // 当窗口大小变化时重新计算rem尺寸并更新html字体大小以适应新的尺寸变化