开发常用单位
- 像素（px）：绝对单位，固定的像素，一旦设置了就无法随着页面大小而改变。
- 百分比（%）：为子元素设置百分比相对于直接父元素。
- rem与em：相对单位，rem相对于根元素的字体大小单位，em相对于父元素
- vw，vh：相对viewport的宽度，高度。视口的宽高为100vw，100vh.
- vmin，vmax：vw和vh中的较小/大值
移动端适配方案
1 viewport缩放
viewport就是设备的屏幕上显示我们的网页的那一块区域，适配移动端，可以控制对整个页面的视口的缩放：
<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1,user-scalable=no">
content参数有以下几种：
- width 宽度：默认device-width
- initial-scale：页面初始缩放比例
- minimum-scale：最小缩放比例
- maximum-scale：最大缩放比例
- user-scalable：是否允许用户缩放
2 动态rem方案
原理
rem 是指相对于根元素的字体大小的单位，对于需要等比缩放的元素可以选用rem作为单位，对于不需要等比缩放的元素依旧使用px作为单位。2rem 等于html标签font-size的2倍，因此只需调整html标签的font-size，就能让所有使用rem单位的元素跟随着发生变化，而使用px单位的元素不受影响。
举例
假设设计稿尺寸是750px * 750px，设计稿上一个div的标注尺寸是375px，希望div缩放，边框1px不缩放。需要设置：
- html的font-size = 1rem = 100*屏幕宽度/设计稿宽度
- 在写CSS时设置 div 的宽度是 3.75rem ，边框宽度为1px
假设在逻辑像素宽度是375px的设备上打开页面，则html的font-size是100*375/750 = 50px，div的宽度是3.75rem ，即187.5px 正好是屏幕宽度的一半。
问：为什么要用100来乘以屏幕宽度/设计稿宽度？ 答：其实100只是随便选取的一个值，换算起来就没那么直观了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
<script>
const WIDTH = 750 //如果是尺寸的设计稿在这里修改
const setView = () => {
//设置html标签的fontSize
document.documentElement.style.fontSize = (100*screen.width/WIDTH) + 'px'
}
window.onorientationchange = setView
setView()
</script>
<style>
div {
width: 3.75rem; /*需要等比缩放使用rem单位，比如设计稿中标注的375px这里写成3.75rem */
border: 1px solid #ccc; /*不需要缩放的部分用px*/
}
</style>
</head>
<body>
<div>内容</div>
</body>
</html>
3 VW方案
原理
vw是相对单位，1vw表示屏幕宽度的1%。基于此，把所有需要等比缩放的元素，在CSS设置样式时都使用vw做为单位。尺寸 = 100vw × 设计稿中该元素宽度 / 设计稿宽度。
举例
假设设计稿尺寸是750px * 750px，设计稿中按钮的宽度为120px，高度48px，文字标注大小28px，边框为1px。那么(120/750)*100% = 16% ，换句话说这个按钮的宽度占屏幕宽度的16%，不管任何屏幕都是如此。 16% 即 16vw。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
<style>
.button {
width: 16vw; /* 100vw*120/750 */
line-height: 6.4vw; /* 100vw*48/750 */
font-size: 3.73vw; /* 100vw*28/750 */
text-align: center;
}
</style>
</head>
<body>
<div class="button">按钮</div>
</body>
</html>
4 适配方案对比
| 适配方案 | 难易程度 | 是否使用JS | 是否需要换算 | 特点 |
|---|---|---|---|---|
| viewport缩放 | 简单 | 需要使用JS | 无需换算 | 方案死板，只能实现页面整体缩放 |
| 动态REM | 稍复杂 | 需要使用JS | px换算到CSS的rem | 方案灵活，可以整体缩放又能局部不缩放 |
| vw | 简单 | 不需要使用JS，直接在CSS里设置 | px换算到CSS的vw | 方案灵活，可以整体缩放又能局部不缩放 |
