前端页面自适应等比例缩放 Flexible+rem方案

最新推荐文章于 2025-05-22 09:54:27 发布

尹潦

最新推荐文章于 2025-05-22 09:54:27 发布

阅读量1k

点赞数 6

CC 4.0 BY-SA版权

文章标签：前端

本文链接：https://blog.youkuaiyun.com/YinLiaoEr/article/details/143855203

在移动互联网时代，随着智能手机和平板电脑的普及，前端开发者面临的一个重要挑战是如何让网页在不同尺寸和分辨率的设备上都能良好地显示。为了应对这一挑战，阿里巴巴的前端团队开发了 flexible.js，旨在提供一种简单有效的解决方案，帮助开发者实现移动端页面的自适应布局。

原理

`1.rem` 单位

rem 是一个相对长度单位，相对于根元素（即 <html> 标签）的字体大小(假设字体大小)。这意味着无论 <html> 标签的 font-size 如何变化，所有使用 rem 单位的元素都会相应地调整其尺寸。

假设你的html标签的font-size=16px, 那么1rem=16px。相应的如果你改变了html标签的font-size大小,如20px,那么1rem = 20px。

`2.flexible.js` 的作用

flexible.js 是一个用于动态设置 <html> 标签的 font-size 的 JavaScript 脚本。它的主要目的是根据屏幕宽度计算一个合适的 font-size 值，并将其应用到 <html> 标签上。这样，所有使用 rem 单位的元素就能根据屏幕宽度自动调整大小，从而实现自适应布局。

`2.1flexible.js` 的工作原理

获取屏幕宽度并计算字体大小：flexible.js 会获取当前屏幕的宽度，通常是document.documentElement.clientWidth。

var docEl = document.documentElement
function setRemUnit () {
    var rem = docEl.clientWidth / 24
    docEl.style.fontSize = rem + 'px'
  }

监听屏幕尺寸变化：flexible.js 会监听窗口的 resize 事件，以便在屏幕尺寸发生变化时重新计算并更新 <html> 标签的 font-size。

// reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

使用

1.引入flexible.js

js文件内容如下值得注意的是setRemUnit()这个函数,他的除数,就是把屏幕视口均分成了多少份,一份是1rem,这里是将屏幕均分成了24份。这里如果要修改的话,后续css中使用rem数值也需要修改

(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 / 24 (24份)
  function setRemUnit () {
    var rem = docEl.clientWidth / 24
    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))

<!-- 在需要自适应的地方导入js文件,之后该页面所有的css样式,
    涉及到长度,需要使用rem来作为单位 -->
<script src="js/flexible.js"></script>

2.VSCode插件设置

安装这个插件

回顾之前自己设置的份数,如果没有改js,就填入80,如果改了,请相应的修改

3.css中的编写

可以看见如果安装了插件并配置好后,会自动根据px值计算出rem,涉及到长度高度的,我们统一使用rem作为单位(如果是那种1px之类的特别小的,其实不转也无所谓)

快捷键:一键从px改成rem

vscode中,在当前css文件中F1 输入px 选择 px to rem (前提条件:配置好vscode的插件)

至此应该成功的根据浏览器大小进行适配拉,就算进行缩放也不会变形