返回

你不可错过的移动web开发之rem适配布局技巧！

前端





**一、rem布局** 

1. **rem单位** 

rem（root em）是一个相对单位，类似于em，em是父元素字体大小。rem的基准是相对于`<html>`元素的字体大小。

2. **rem实现方法** 

实现rem适配布局，可以有两种方法：

* **使用媒体查询** 

```css
@media (max-width: 600px) {
  html {
    font-size: 10px;
  }
}

@media (min-width: 601px) {
  html {
    font-size: 12px;
  }
}
  • 使用JavaScript
document.documentElement.style.fontSize = window.innerWidth / 10 + 'px';
  1. rem布局技巧
  • 使用rem单位定义元素大小
body {
  font-size: 1.6rem;
}

h1 {
  font-size: 2.4rem;
}

p {
  font-size: 1.4rem;
}
  • 使用rem单位定义间距
margin: 1rem;
padding: 1rem;
  • 使用rem单位定义边框
border: 1px solid #000;
  • 使用rem单位定义圆角
border-radius: 1rem;
  1. rem布局注意事项
  • 避免使用过小的rem值

过小的rem值会使文本难以阅读。一般来说，rem值不应小于12px。

  • 避免使用过大的rem值

过大的rem值会使布局看起来不协调。一般来说，rem值不应大于24px。

  • 在不同设备上测试布局

在不同设备上测试布局，以确保布局在所有设备上都看起来正常。

二、rem适配布局的优势

  • 灵活性

rem适配布局具有很强的灵活性，可以轻松地调整布局以适应不同设备。

  • 可维护性

rem适配布局的可维护性很高，因为只需更改<html>元素的字体大小，就可以调整整个布局。

  • 响应性

rem适配布局是响应式的，可以自动调整布局以适应不同设备。

三、rem适配布局的局限性

  • 不支持IE8及以下浏览器

rem单位不支持IE8及以下浏览器。

  • 在某些情况下可能导致布局混乱

在某些情况下，rem适配布局可能导致布局混乱。例如，当<html>元素的字体大小被设置为0时，整个布局就会混乱。

四、结论

rem适配布局是一种简单、灵活、可维护的移动web开发布局方式。在大多数情况下，rem适配布局都能很好地满足移动web开发的需要。