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

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

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

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（不大于）,而不是写具体的宽度，如下：

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插件；

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

  
  
  
  
  


  
看看我多大