vue-自适应布局-postcss-pxtorem

原理：
比如一个375px设计稿 其中一个320px宽度的元素 如何实现自适应布局呢？

其实可以这样理解：
我们先计算出375屏幕时候320px的大小，在屏幕变化时候，这些元素都会等比例缩放
比如屏幕从375 变为750px时候，320 应该变为640

而有一个单位就可以做到统一缩放，可以将320px写为320rem ，而html 的font-size可以写为1px
然后根据屏幕变化进行更新html 的font-size 就可以达到缩放了，比如750px屏幕下将html 的font-size修改为2px ，那么320rem 计算出的值就是640px

而postcss-pxtorem 其实就是利用了这个原理，
rootValue:设置为16 意思是 一开始是以html的font-size为16px 进行换算
也就是320px 换算为20rem
32px的元素被换算为2rem
但是仅仅配置这里还是不行的，此时不管屏幕多大还是显示的在375px下的样式
所以我们应该监听屏幕变化，比如切换到750px屏幕时候，根html的font-size应该被设置为32px ，那么20rem 对应的值才会被算为640px

import $ from 'jquery'
// 设置 rem 函数
function setRem() {
  // 1920 默认大小16px; 1920px = 120rem ;每个元素px基础上/16

  // 375 屏幕时候使用16px
  // 750 屏幕时候使用32px
  const screenWidth = 375
  const scale = screenWidth / 16
  const htmlWidth = document.documentElement.clientWidth || 
  document.body.clientWidth
  // 得到html的Dom元素
  const htmlDom = document.getElementsByTagName('html')[0]

  // 如果太大了  就当做500 来计算
  if (parseInt(htmlWidth) > 500) {
    htmlDom.style.fontSize = 500 / scale + 'px'
  } else {
    // 设置根元素字体大小
    htmlDom.style.fontSize = htmlWidth / scale + 'px'
  }
}
// 初始化
$(function () {
  setRem()
})
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30