likes
comments
collection
share

移动端 Rem 适配在 PC 端浏览器下（以谷歌浏览器为主），字体的默认大小是16px，字体最小为12px 。 但是在移

作者站长头像
站长
· 阅读数 27

适配的概念：实现页面在不同设备上等比， 也就是说 改变了一个元素在不同设备上占据 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 的值转换太过复杂

转载自:https://juejin.cn/post/6916808729753026568
评论
请登录