网站首页布局风格创意作品

原理：
比如一个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 屏幕时候使用32pxconst screenWidth = 375const scale = screenWidth / 16const 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()
}