移动端 Rem 适配

最新推荐文章于 2024-05-17 17:40:41 发布

白猫儿

最新推荐文章于 2024-05-17 17:40:41 发布

阅读量806

点赞数

分类专栏： rem 移动端适配文章标签： html 前端 web app

本文链接：https://blog.csdn.net/weixin_46107920/article/details/111563292

版权

移动端适配同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

rem

1 篇文章 0 订阅

订阅专栏

移动端 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>

两次结果均如下图所示：

在这里插入图片描述

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 的值转换太过复杂

白猫儿

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
移动端 Rem 适配

移动端 Rem 适配适配的概念：实现页面在不同设备上等比，也就是说改变了一个元素在不同设备上占据 css 像素的个数打个比方，比如说页面上有一个盒子，占移动端设备宽度的 50% ，在改变移动端设备的情况，把盒子由 iphone 6 的 375 px (css 像素)设备宽度的，放到 6 plus 414px（css 像素）设备宽度的屏幕下，两个盒子仍然占据设备宽度的 50%先要明白两个单位 em 和 rem：在 PC 端浏览器下（以谷歌浏览器为主），字体的默认大小是16px，字体最小为12px
复制链接

扫一扫

专栏目录