viewport适配
通过配置 <meta name="viewport" content="width=设计稿宽度">来实现适配。
原理：在任何设备下运行时，该网页的视口大小始终一致，这样相同css像素的值在不同宽度的设备下显示的比例就是一致的。如果对视口还不是很了解的小伙伴可以看看我写的一篇文章的 视口 章节。
缺点：任何元素都参与适配，比如文本、边框，这些我们往往不需要适配；兼容性不好，这种写死的写法，有些浏览器不支持。
现有375px的设计稿，代码实现如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=375">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.box1{
width: 375px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
375px的设备下运行的结果：
428px的设备下运行的结果：
vw适配
1vw = 布局视口宽度的 1%
1vh = 布局视口高度的 1%
为什么不使用百分比 而使用vw：没有开启定位百分比是相对于父元素的，开启定位后百分比是相对于最近开启定位的祖先元素，如果存在层次性，很难适配。
缺点：兼容性不好。
<!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>
<style>
*{
padding: 0;
margin: 0;
}
/*适配一个 95% 宽度的盒子,高度也做适配，在任何设备下宽高比不变，很适合放置图片*/
.box1{
background-color: aqua;
width:95vw;
height:46vw ;
margin: auto;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
375px的设备下运行的结果：
414px的设备下运行的结果：
rem适配
em相对于父元素的字体而言，rem相对于根字体（html标签的字体大小）。
适配原理：通过脚本动态设置 1rem 对应的 css像素值。
优点：兼容性好。
设计稿宽为375px，适配一个 95% 宽度的盒子。我们这里以1 rem 等于设计稿的 100 px的对应关系来适配，方便计算。代码实现如下 ：
<style>
*{
margin: 0;
padding: 0;
}
body{
font-size: 18px; /* 覆盖100px,使得继承的字体不会很尴尬 */
}
.box{
background-color: aqua;
width: calc(3.75rem * 0.95);
height:calc(3.75rem * 0.46);
margin: auto;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
function adapter(){
// 获取跟标签
const root=document.documentElement
// 获取设备宽度
const screenWidth = root.clientWidth
// 计算该设备下1rem对应的字体大小。因为3.75rem是满屏
const rsize=screenWidth / 3.75 + 'px'
// 为跟标签设置计算出来的字体大小
root.style.fontSize=rsize
}
adapter()
window.onresize = adapter
</script>
</body>
375px的设备下运行的结果：
414px的设备下运行的结果：
1289
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
