PC端动态适配不同尺寸屏幕

·  阅读 4592

1.安装postcss-pxtorem

npm install postcss-pxtorem -D
复制代码

2.在项目根目录创建postcss.config.js文件

写入如下内容
module.exports = {
    plugins: {
      'autoprefixer': {},
      'postcss-pxtorem': {
        'rootValue': 10,//结果为:设计稿元素尺寸/10,
        propList: ['*']
      }
    }
  }
复制代码

3.动态改变根元素的fontSize大小(卸载main.js中即可)

// 适配不同尺寸屏幕(动态计算根元素的大小fonSize)
function resizeCount() {
  const baseConstn = 192 // 1920的设计稿 / 基数10
  const nowWidth = document.documentElement.clientWidth
  const nowCount =  nowWidth / baseConstn
  document.querySelector('html').style.fontSize = nowCount + 'px'
}
// 初始化
resizeCount()

window.addEventListener('resize', () => {
  resizeCount()
})
复制代码

4.打开页面,查看html元素是否随窗口宽度变化而变化

5.参考链接

https://www.jianshu.com/p/8350b611e5bb
复制代码
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改