px,
px是固定单位
rem是相对于html的font-size
em是相对当前元素的font-size ,如果当前元素没有往上找，知道找到body的font-size 左后至默认的font-size
vh/vw vw 就是根据窗口的宽度，分成100等份，100vw就表示满宽，50vw就表示一半宽。（vw 始终是针对窗口的宽），同理，vh则为窗口的高度
calc()
- 使用“+”、“-”、“*” 和 “/”四则运算；
- 可以使用百分比、px、em、rem等单位；
- 可以混合使用各种单位进行计算；
- 表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；
- 表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。
rem移动端适配
window.onload = function () { //进入页面后立即触发一次
var width = window.innerWidth
document.documentElement.style.fontSize=(width/750)*100 + 'px' //对于不同的设计稿可以除以不同的等分
window.addEventListener('resize',()=> { //监听手机屏幕变化,有变化后在走一次
var width = window.innerWidth //获取屏幕的宽度,然后根据不同的屏幕宽度设置不同的font.size
console.log(document.documentElement, 88); //document.documentElement获取dom结构
//把设计稿分成750等分,他就变成了7.5这样太小了,最小是12,所以要*100放大100倍
document.documentElement.style.fontSize=(width/750)*100 + 'px' //在html标签上添加行内样式字体大小
})
}
引入使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./rem.js"></script>
<style>
div {
width: 1rem;
height: 1rem;
background-color: coral;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
