详解rem 适配布局

下面我来详细讲解一下 “详解rem适配布局” 的完整攻略。

什么是rem适配布局？

rem适配布局是一种根据不同设备屏幕大小自动调节页面元素大小的布局方式。常见的有两种方式：

1. 根据屏幕宽度的百分比设置字体大小，如 font-size: 16px 改为 font-size: 5vw。vw是viewport width的缩写，1vw等于屏幕宽度的1%。

2. 使用rem作为单位，将页面元素大小设置为相对于根元素（html）字体大小的倍数，如 font-size: 2rem。

如何实现rem适配布局？

首先需要在页面头部设置viewport：

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

然后使用JavaScript获取并计算屏幕大小，动态生成html字体大小：

function setHtmlFontSize() {
  var screenWidth = document.documentElement.clientWidth; // 获取屏幕宽度
  var html = document.getElementsByTagName('html')[0]; // 获取html元素
  var fontSize = screenWidth / 10; // 设计图宽度为750px，根元素字体大小为75px
  html.style.fontSize = fontSize + 'px'; // 设置根元素字体大小
}
setHtmlFontSize(); // 页面加载时执行
window.addEventListener('resize', setHtmlFontSize); // 窗口大小改变时重新计算

接下来在样式表中使用rem作为单位设置元素大小即可：

body {
  font-size: 14px;
}

h1 {
  font-size: 2rem; /* 相当于根元素字体大小的2倍 */
}

p {
  font-size: 1.5rem; /* 相当于根元素字体大小的1.5倍 */
}

/* 其他元素同理 */

示例说明

假设设计图宽度为750px，需要将元素的大小设置为设计图中的大小，实现rem适配布局的过程如下：

1. 计算根元素字体大小。由于设计图宽度为750px，根元素字体大小定为75px（即750 / 10）。

2. 根据设计图中元素大小设置元素的rem值。假设某个元素在设计图中大小为30px，则其rem值为 30 / 75 = 0.4rem。

3. 使用rem作为单位设置元素大小：

.element {
  font-size: 0.4rem;
  width: 2rem;
  height: 1rem;
  /* 其他样式属性 */
}

1. 根据浏览器窗口大小计算新的根元素字体大小，并重新计算元素大小。

function setHtmlFontSize() {
  var screenWidth = document.documentElement.clientWidth;
  var html = document.getElementsByTagName('html')[0];
  var fontSize = screenWidth / 10;
  html.style.fontSize = fontSize + 'px';

  // 重新计算元素大小
  var element = document.getElementsByClassName('element')[0];
  element.style.width = 2 * fontSize + 'px';
  element.style.height = fontSize + 'px';
  element.style.fontSize = 0.4 * fontSize + 'px';
}

总结

rem适配布局可以使页面在不同设备上的显示效果更加统一和美观，可以减少因设备屏幕大小变化而出现的错位等问题。同时，rem适配布局的实现也是一个比较简单的过程，只需要按照上述步骤进行操作即可。