1、什么是自适应
自适应区别于响应式布局最大的优点是可以适应视口宽度为任意大小的设备。
2、什么是rem
rem是相对于根元素也就是html的字体大小单位，容易与em混淆，em指的是相对于父元素的字体大小，如果需要做自适应，那么应当使用rem做全局处理，而不是使用em。
3、什么是rem基准值
rem基准值就是rem与px之间的换算关系，个人习惯上喜欢设置为1rem=100px,在配置文档中设置好基准值之后，输入px单位会自动提示转换为rem单位。
4、rem的计算公式 ：设备视口宽度 / 设计稿宽度 * 100，既然做自适应，那么视口的宽度肯定是不固定的，这里通常使用100vw来表示视口宽度；
5、为了避免设备视口宽度可以无限放大，可以使用媒体查询做出限制，当设备的宽度超出某一个值之后将内容大小固定，将不再随设备的视口大小进行变化。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
html{
//在根元素中计算基准值字体大小，设备宽度 / 设计稿宽度 * 100
font-size: calc(100vw / 375 * 100);
}
body{
font-size: 16px;
}
//使用媒体查询监测设备视口宽度，当视口宽度大于最大移动设备宽度时，将内容的大小设置为固定值，不再随设备视口大小进行变化
@media only screen and (min-width:769px){
html{
//将根元素字体大小设置为需求最大宽度的基准值大小
font-size: calc(769px / 375 * 100);
}
body{
//将内容宽度固定设置为需求最大宽度
width: 769px;
margin: auto;
}
}
#box{
width: 1rem;
height: 1rem;
background-color: aqua;
font-size: 0.16rem;
}
</style>
<body>
<div id="box">
测试rem
</div>
</body>
</html>
1197
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
