移动端开发——rem混合布局

最新推荐文章于 2024-02-13 11:25:59 发布

悠悠然的心态

最新推荐文章于 2024-02-13 11:25:59 发布

阅读量43

点赞数

文章标签：前端 html css

本文链接：https://blog.csdn.net/zhujiale159/article/details/133986555

版权

本文介绍了如何在VSCode中配置插件，如pxtorem和flexible.js，以实现响应式设计，通过RootFontSize设置根字体大小并使用rem单位，确保在不同屏幕尺寸下保持良好的显示效果。

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

VS Code 安装插件

px to rem & rpx &vw （cssrem）

VS Code 设置

Root Font Size 设置为切图的 1/10

比如一个切图的宽度为750px，这里设置为75px即可

引入 js 文件

flexible.js，该 js 文件可以根据页面宽度的不同，自动更改html根字体大小

GitHub地址：GitHub - amfe/lib-flexible: 可伸缩布局方案

以下是flexible的源码

(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))

第 18 行表示将页面宽度分为10等份，可以自行修改

分为10等份时，750px页面宽度的html根字体大小就是 75px （750px 的 1/10）