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

栈老师不回家

已于 2022-11-08 20:20:45 修改

阅读量2.5k

点赞数 4

分类专栏： JavaScript 文章标签： javascript 前端 css

于 2022-10-21 12:06:42 首次发布

本文链接：https://blog.csdn.net/m0_52861684/article/details/127442155

版权

JavaScript 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

本文介绍了如何通过flexible.js实现响应式设计，包括下载和引用flexible.js，配置cssrem以支持rem单位，以及通过案例演示了如何根据不同屏幕调整字体大小和单位。重点在于利用rem进行跨设备的可伸缩布局。

摘要由CSDN通过智能技术生成

文章目录

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'
  }

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

<script src="flexible.js"></script>

2.cssrem 安装及配置

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

在这里插入图片描述

在这里插入图片描述
② 接下来点插件扩展设置，进行配置修改！

在这里插入图片描述

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

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

在这里插入图片描述
注意不使用 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>

栈老师不回家

关注

4
点赞
踩
14

收藏

觉得还不错? 一键收藏
打赏
0
评论
基于 flexible.js 和 cssrem 插件实现屏幕适配

flexible 原理就是根据不同的屏幕宽度，动态地检测浏览器宽度，并设置 HTML 字体的大小，这里的 px 一律用 rem 来代替。注意我这个80是怎么来的，我现在要求屏幕的展示效果大小为1920px，1920px 的屏幕要分成24份，那么基准就是效果图大小除以份数，也就是1920 / 24 = 80，这个80就是基准值。/* 屏幕宽度大于1920px后固定单位，1920/24=80 */举个例子，比如我要把屏幕分成24等份，只需将这里的10改成24！③ 我这里依然是以24份为例，把基准修改为80！
复制链接

扫一扫