阅读 1023

移动端 Rem 适配

适配的概念:实现页面在不同设备上等比, 也就是说 改变了一个元素在不同设备上占据 css 像素的个数

打个比方,比如说页面上有一个盒子,占移动端设备宽度的 50% ,在改变移动端设备的情况,把盒子由 iphone 6 的 375 px (css 像素)设备宽度的,放到 6 plus 414px(css 像素) 设备宽度的屏幕下,两个盒子仍然占据设备宽度的 50%

先要明白两个单位 em 和 rem:

在 PC 端浏览器下(以谷歌浏览器为主),字体的默认大小是16px,字体最小为12px 。 但是在移动端下字体没有默认大小。

em

相对于自身的 font-size 大小 比如 :1em = 16px

rem

相对于 html 根标签的 font-size 大小

因此可以利用 获取设备 视口宽度 的方式来做移动端适配

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- 完美视口 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>rem</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .box {
      width: 8rem;
      height: 8rem;
      background-color: #f60;
    }
  </style>
</head>
<body>
  <div class="box">test</div>
</body>
<script>
  let html = document.querySelector('html')
  // 1rem = html.style.fontSize
  // 布局视口的宽度就为 16rem
  // 设计图的宽度为750px (以iphone6为准) ,其实就是16rem
  html.style.fontSize = document.documentElement.clientWidth/16 + 'px'
</script>
</html>
复制代码

获取视口宽度为 750px , 此时 1rem = 750px; 除以16则为:视口宽度为 1rem = 750/16 + 'px';

但是上面的方法是有缺陷的,由于权重比较低,所以 font-size 的属性会被改变; 因此我们会想到 给属性加 !important 增加权重,但是 !important 是作为 css 属性,它并不能在标签中使用,所以就有了下面的方案。

创建一个style标签,然后给标签添加 HTML 属性 font-size 来设置字体大小

完美方案

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- 完美视口 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>rem</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .box {
      width: 8rem;
      height: 8rem;
      background-color: #f60;
    }
  </style>
</head>
<body>
  <div class="box">test</div>
</body>
<script>
  // 先创建一个style标签
  // 给标签添加内容,内容就为根标签的字体大小
  // 然后将创建的style标签放到head标签中
  (function () {
    let styleNode = document.createElement('style')
    let width = document.documentElement.clientWidth/16
    styleNode.innerHTML = "html {font-size: "+ width +"px !important}"
    document.head.appendChild(styleNode)
  })()
</script>
</html>
复制代码

两次结果均如下图所示: p9-juejin.byteimg.com/tos-cn-i-k3…

Rem适配的优缺点

  • 优点: 不会破坏完美视口

      <!-- 完美视口 -->
      <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    复制代码
  • 缺点: px 的值到 rem 的值转换太过复杂

文章分类
前端
文章标签