一. 当设置默认html的font-size为37.5px时
1. 动态设置html的font-size的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>rem</title>
<link rel="stylesheet" href="./src/assets/css/base.css">
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
<script>
//获取屏幕宽度(viewport)
let htmlWidth = document.documentElement.clientWidth ||
document.body.clientWidth;
console.log(htmlWidth);
//获取htmlDom
let htmlDom = document.getElementsByTagName('html')[0];
//设置html的font-size
htmlDom.style.fontSize = htmlWidth/10+'px';
window.addEventListener('resize',(e)=>{
let htmlWidth = document.documentElement.clientWidth ||
document.body.clientWidth;
console.log(htmlWidth);
//获取htmlDom
let htmlDom = document.getElementsByTagName('html')[0];
//设置html的font-size
htmlDom.style.fontSize = htmlWidth/10+'px';
})
</script>
</html>
2. 核心函数:
pxToRem(designpx)
$rem = 37.5px;
return (designpx / $rem)rem
3. 推导流程:
已知默认宽度为375px, 因为1rem == html的font-size的值, 之所以把html的字体大小赋值成当前屏幕款的1/10, 只是因为好算, 倒推得到:
1) 当移动端屏幕宽度为375px时, 1rem == 37.5px, 15px转化成rem: 15 / 37.5 == 0.4rem;
2) 同理如果是750px的屏幕: 1rem == 75px, 期望的是0.4rem的字体大小要显示为30px的效果;
按照上述计算方式: 30 / 75 == 0.4rem, rem再转换为px的值0.4 * 75 == 30px, 符合30px的期望 ,符合屏幕越大显示内容字体越大的需求。
3) 以此类推1rem == (当前屏幕宽度 / 10) + px单位; px转换为rem: rem的值 == 1倍ui设计图的px数值 / 37.5;
4. 浏览器验证方法:
屏幕宽度为1500px时:
屏幕宽度为375px时:
注意事项: 当然不一定要使用37.5px为375px屏幕宽度下的html的font-size的值, 也可以使用其他的数字, 比如设置该屏幕宽度下html的font-size大小为16px
二. 当默认html的font-size设置为16px时:
1. 动态设置html的font-size的css属性值
const unitNum = 375 / 16
//获取屏幕宽度(viewport)
let htmlWidth = document.documentElement.clientWidth ||
document.body.clientWidth;
console.log(htmlWidth);
//获取htmlDom
let htmlDom = document.getElementsByTagName('html')[0];
//设置html的font-size
htmlDom.style.fontSize = htmlWidth/unitNum +'px';
window.addEventListener('resize',(e)=>{
let htmlWidth = document.documentElement.clientWidth ||
document.body.clientWidth;
console.log(htmlWidth);
//获取htmlDom
let htmlDom = document.getElementsByTagName('html')[0];
//设置html的font-size
htmlDom.style.fontSize = htmlWidth/unitNum +'px';
})
2. pxToRem函数改为:
pxToRem(designpx )
$rem = 16px;
return (designpx / $rem)rem
3. 验证方法:
rem效果快捷推导参照物: calc(100vw / (375 / 16));
const defaultScreenWidth = 375;
const unitNum = (375 / 16);
const defaultHtmlFontSize = 16px;
const newScreenWidth = document.documentElement.clientWidth ||
document.body.clientWidth;(当前最新的屏幕宽度)
1) 1rem == newScreenWidth / unitNum;
2) 所以在375px的屏幕宽度下: 16px == 1rem == calc(100vw / (375 / 16));
3) 所以在750px的屏幕宽度下期望按钮字体大小为:
当前屏幕宽度(750) * defaultHtmlFontSize / defaultScreenWidth;
即32px == 1rem == calc(100vw / unitNum);
4) 1500px屏幕宽度下:
因为公式: 当前屏幕宽度 * defaultHtmlFontSize / defaultScreenWidth;
得到期望的按钮字体大小: 64px == 1rem == calc(100vw / unitNum);
注意: calc(100vw / unitNum); 拆开就是calc(100vw * 16 / 375); 这样在浏览器好写一些, 更加好验证
使用方法:
属性名: pxToRem(数值+px单位)