基于 flexible.js 和 cssrem 插件实现屏幕适配

秒速五厘米 2023-09-24 13:09 19阅读 0赞

#### 文章目录 ####

*   *  1.flexible.js 下载及引用
     *  2.cssrem 安装及配置
     *  3.案例演示

### 1.flexible.js 下载及引用 ###

这里我已经把源码复制过来了，大家可以直接复制到自己的 flexible.js 文件中！

(function flexible (window, document) {
        
      var docEl = document.documentElement
      var dpr = window.devicePixelRatio || 1
    
      // adjust body font size
      function setBodyFontSize () {
        
        if (document.body) {
        
          document.body.style.fontSize = (12 * dpr) + 'px'
        }
        else {
        
          document.addEventListener('DOMContentLoaded', setBodyFontSize)
        }
      }
      setBodyFontSize();
    
      // set 1rem = viewWidth / 10
      function setRemUnit () {
        
        var rem = docEl.clientWidth / 10
        docEl.style.fontSize = rem + 'px'
      }
    
      setRemUnit()
    
      // reset rem unit on page resize
      window.addEventListener('resize', setRemUnit)
      window.addEventListener('pageshow', function (e) {
        
        if (e.persisted) {
        
          setRemUnit()
        }
      })
    
      // detect 0.5px supports
      if (dpr >= 2) {
        
        var fakeBody = document.createElement('body')
        var testElement = document.createElement('div')
        testElement.style.border = '.5px solid transparent'
        fakeBody.appendChild(testElement)
        docEl.appendChild(fakeBody)
        if (testElement.offsetHeight === 1) {
        
          docEl.classList.add('hairlines')
        }
        docEl.removeChild(fakeBody)
      }
    }(window, document))

flexible 原理就是根据不同的屏幕宽度，动态地检测浏览器宽度，并设置 HTML 字体的大小，这里的 px 一律用 rem 来代替。flexible 默认配置是将屏幕宽度划分为10等份，当然我们也可以根据自己的需求手动设置分成的份数。  
举个例子，比如我要把屏幕分成24等份，只需将这里的10改成24！

// set 1rem = viewWidth / 24
      function setRemUnit () {
        
        var rem = docEl.clientWidth / 24
        docEl.style.fontSize = rem + 'px'
      }

把插件引入到页面中很简单：

### 2.cssrem 安装及配置 ###

① 打开 VScode → 点扩展搜索 cssrem → 安装第一个。

![在这里插入图片描述][9c5b9a8ba14a4a9b8c9560718abfc01f.png]

![在这里插入图片描述][09f2be4a56904e7b91c6b70e2c1fe2e0.png_pic_center]  
② 接下来点插件扩展设置，进行配置修改！

![在这里插入图片描述][aae03632a55b484eb9dfe645b0ff8e20.png]

③ 我这里依然是以24份为例，把基准修改为80！  
注意我这个80是怎么来的，我现在要求屏幕的展示效果大小为1920px，1920px 的屏幕要分成24份，那么基准就是效果图大小除以份数，也就是1920 / 24 = 80，这个80就是基准值。

![在这里插入图片描述][3911a0d1794746d29dc0bb089bf6feea.png_pic_center]  
④ 可以看到当我们配置成功的时候，该插件就会自动提示将 px 单位转换成 rem 单位。  
也就是说，200px 等于 2.5rem，我们需要将 200px 换成 2.5rem！

![在这里插入图片描述][95639e4e22e940089e19be0a8432ec51.png]  
`注意不使用 rem 单位则无法进行可伸缩适配！`

### 3.案例演示 ###

<!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>
            /* 屏幕宽度小于1024px后固定单位，1024/24=42.66 */
            @media screen and (max-width:1024px){
          
                html {
          
                    font-size: 42.66px !important;
                }
            }
            /* 屏幕宽度大于1920px后固定单位，1920/24=80 */
            @media screen and (min-width:1920px) {
          
                html {
          
                    font-size: 80px !important;
                }
            }
            .box {
          
                width: 2.5rem;
                height: 2.5rem;
                background-color: brown;
            }
        </style>
        <script src="flexible.js"></script>
    </head>
    <body>
        <div class="box"></div>
    </body>
    </html>

[9c5b9a8ba14a4a9b8c9560718abfc01f.png]: https://img-blog.csdnimg.cn/9c5b9a8ba14a4a9b8c9560718abfc01f.png
[09f2be4a56904e7b91c6b70e2c1fe2e0.png_pic_center]: https://img-blog.csdnimg.cn/09f2be4a56904e7b91c6b70e2c1fe2e0.png#pic_center
[aae03632a55b484eb9dfe645b0ff8e20.png]: https://img-blog.csdnimg.cn/aae03632a55b484eb9dfe645b0ff8e20.png
[3911a0d1794746d29dc0bb089bf6feea.png_pic_center]: https://img-blog.csdnimg.cn/3911a0d1794746d29dc0bb089bf6feea.png#pic_center
[95639e4e22e940089e19be0a8432ec51.png]: https://img-blog.csdnimg.cn/95639e4e22e940089e19be0a8432ec51.png