1.百分比设置:几乎不用

因为各种属性百分比参照物(自身/父元素/...需要去查文档)很难统计固定,所以不用百分比进行适配 

2.rem单位+动态html的font-size

使用rem,因为rem参考html的fz,只需要在不同的屏幕上设置不同的html的fz即可,其他地方全用rem

 rem的fz尺寸

媒体查询

编写js代码

// 1.获取html的元素
const htmlEl = document.documentElementfunction setRemUnit() {// 2.获取html的宽度(视口的宽度)const htmlWidth = htmlEl.clientWidth// 3.根据宽度计算一个html的font-size的大小const htmlFontSize = htmlWidth / 10// 4.将font-size设置到html上htmlEl.style.fontSize = htmlFontSize + "px"
}
// 保证第一次进来时, 可以设置一次font-size
setRemUnit()// 当屏幕尺寸发生变化时, 实时来修改html的font-size
window.addEventListener("resize", setRemUnit)

lib-flexible库

在github下载

原理与js函数相似,但是库函数添加了查询浏览器是否支持0.5px,不支持可以使用scale缩小

以及前进后退页面的适配

 很多页面的fz默认继承了html字体,如果750px的宽度,fz可能默认为75px,太大了,所以需要重新设置一个默认的fz大小

但是!!!!!!!

 rem的单位换算

 1.手动计算,帮助理解,实际不会用

2.less/scss函数

.pxToRem(@px) {result: 1rem * (@px / 37.5);
}.box {width: .pxToRem(100)[result];height: .pxToRem(100)[result];background-color: orange;
}p {font-size: .pxToRem(14)[result];
}

3.真实开发使用webpack打包,不需要思考em的换算,也不需要使用less/scss

 4.安装vs code插件

 默认1em=75px,是固定的,所以我们需要手动配置

在插件的设置的拓展配置里面,

3.vw单位

使用vw,1%的width,不需要动态设置html的fz,自动根据视口宽度改变

直接给html的fz设置vw

 html {font-size: 10vw;} 

 为什么大部分仍然是rem

1.历史遗留,很久之前开发的,rem可以支持正常使用,改为vw反而可能会出bug

2.vw永远相对于视口大小变化,如果屏幕大到一定极限,依然放大(一般使用vw不考虑)

但是rem可以设置媒体查询,手动设置极限情况下的最大/小值

vw的单位换算

如果写100/37.5 px,最好使用calc函数,否则可能无法正常计算

 方案四要手动设置打开vw,因为默认只有rem自动转换;打开后修改默认的视口大小

4.flex的弹性布局

flex布局,flex=1自动拉伸