扩展知识
1. font-size 默认值
- 浏览器默认fontSize为16px、即100%=16px 1px=62.5%、 即默认16px 代表1rem
2. vw(相对单位)
- 屏幕分成100份=100vw宽 1vw=1%屏幕宽
- 若根HTML为1vw 即1920分辨率下 即1vw=19.2px
第一种(rem适配)
一、px自动转为rem
利用 postcss-pxtorem插件,将代码中px自动转为rem
module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue: 19.2,//结果为:设计稿元素尺寸/19.2,比如元素宽1920px,最终页面会换算成 100rem
propList: ['*']
}
}
}
二、自适应计算设置根font-size的px
//默认设计感1920 html的font-size为19.2rem
windowResize();
let timer;
const BaseFontSize = 100;
window.onresize = windowResize;
function windowResize() {
clearTimeout(timer);
timer = setTimeout(() => {
const width = document.body.clientWidth;
const widthNum = width / BaseFontSize;
document.documentElement.style.fontSize = widthNum + "px";
}, 100);
}
三、使用
正常使用px即可
//设计稿为1920
1.使用
div{
width:1920px; //postcss会将1920/19.2=100rem
}
2.动态响应式计算设置html size为xx px
默认设置19.2px
第二种(rem+vw)
一、利用postcss插件将px转为rem
二、设置html的font-size 为vw
(自动计算)
//1920分辨率下
html{
font-size:1vw; 1vw=1920/100=19.2px
}
三、媒体查询
解决屏幕过大过小问题
第三种
一、根据动态计算的px设置html的font-size
//默认1920下根HTML的size为100px
windowResize();
let timer;
const BaseWidth = 1920;
const BaseFontSize = 100;
window.onresize = windowResize;
function windowResize() {
clearTimeout(timer);
timer = setTimeout(() => {
let width = document.body.clientWidth;
let widthNum = (width / BaseWidth) * BaseFontSize;
document.documentElement.style.fontSize = widthNum + "px";
}, 100);
}
二、使用 代码使用rem
//设计稿为1920
1.使用
div{
width:19.2rem; 19.2rem=1920px
}
2.动态响应式计算设置html size为xx px
默认设置100px
区别
第一种和第二种 代码使用px 利用postcss插件将px转为rem
第三种是代码直接使用rem