rem移动适配解决方案及flexible.js插件使用

最新推荐文章于 2025-03-24 17:52:42 发布

黄马小配件

最新推荐文章于 2025-03-24 17:52:42 发布

阅读量2.2k

点赞数 1

文章标签： html 前端 css

本文链接：https://blog.youkuaiyun.com/m0_59812088/article/details/128053914

版权

企业常用移动适配解决方案：

即实现在不同宽度的设备中，网页元素尺寸等比缩放效果

rem ：目前多数企业在用的解决方案
vw / vh：未来的解决方案及趋势

本文将阐述rem适配方法

rem单位
Ø 相对单位
Ø rem单位是相对于HTML标签的根字号计算结果
Ø 1rem = 1HTML根字号大小

思考
1. 手机屏幕大小不同，分辨率不同，如何设置不同的HTML标签字号？

媒体查询能够检测视口的宽度，然后编写差异化的CSS 样式；

当某个条件成立, 再执行对应的CSS样式；

      /* 1，以视口宽度为375px为例  我们使用媒体查询 */
      @media (width:375px) {
        html {
          font-size: 37.5px;
        }
        
      }

      /* 2.适配414宽度 的手机 */
      @media (width:414px) {
        html {
          font-size: 41.4px;
        }
      }

如上，当视口宽度不同时，设置不同的HTML根字号大小。

但一般会用min-width（不小于）和max-width（不大于）,而不是写具体的宽度，如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 1.屏幕宽度在1366px及一下,用媒体查询适配 */
    @media (max-width:1366px) {
      .box {
        width: 200px;
        height: 200px;
        background-color: tomato;
      }
    }

    /* 2.屏幕宽度在1366px~1600px之间 */
    @media (min-width:1367px) and (max-width:1600px) {
      .box {
        width: 400px;
        height: 400px;
        background-color: orange;
      }
    }

    /* 3.1600px以上 */
    @media (min-width:1601px) {
      .box {
        width: 600px;
        height: 600px;
        background-color: skyblue;
      }
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

2. 设备宽度不同，HTML标签字号设置多少合适？

目前rem布局方案中，将网页等分成10份， HTML标签的根字号为视口宽度的1/10。

rem单位的尺寸= px单位数值/ 基准根字号

如：当屏幕宽度为375px，rem单位的尺寸=375px ÷ 37.5

/* html字体大小设置为屏幕视口的 1/10  320px 375px 414px*/
      /* 
      适配移动端过程：
       1.要利用媒体查询规定不同的屏幕宽度设置不同的根字号大小；屏幕宽度的1/10
       2.页面元素就可以使用rem相对单位，1rem=1html文字大小
      */
      @media (width:320px) {
        html {
          font-size: 32px;
        }
      }

      @media (width:375px) {
        html {
          font-size: 37.5px;
        }
      }

      @media (width:414px) {
        html {
          font-size: 41.4px;
        }
      }

     .box {
       width: 3rem;
       height: 3rem;
       background-color: skyblue;
     }

html根字号大小查看如下图:

上述做法有缺点，由于手机设备多，屏幕尺寸不一，视口宽度不仅仅有上述几个，我们不可能自己一个个来设置。

上述内容只是了解其原理，工作中一般并不需要我们手动写，因为我们可以利用flexible.js插件来实现。

使用flexible.js配合rem实现移动适配步骤

1、自行下载flexible.js，flexible.js是手淘开发出的一个用来适配移动端的js框架，其核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size（html根字号大小），请自行百度下载；

2、安装VScode插件px to rem，去VScode插件搜索px to rem；

3、在需要适配的html文件中引入flexible.js插件；

 <!-- 1.引入手淘 flexible.js 就是完成了所有移动端屏幕的适配(媒体查询)-->
  <script src="./js/flexible.js"></script>

4、在html文件中Ctrl + A全选，再按Alt + Z将px单位转换为rem单位；最后去浏览器验证，按F12打开检查并切换到移动端，改变视口宽度，就实现网页元素尺寸等比缩放效果。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 4rem;  //width的值已转换为rem单位
      height: 4rem;  //height的值已转换为rem单位      
      background-color: skyblue;
      font-size: 0.5rem;  //font-size的值已转换为rem单位
    }
  </style>
</head>
<body>
  <div class="box">看看我多大</div>
  <!-- script引入js文件 手淘js库 适配移动端-->
  <script src="./js/flexible.js"></script>
</body>
</html>