1. meta viewport
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
2. 媒体查询
媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成，例如宽度、高度和颜色。
2.1 link标签中加上meta
<link rel="stylesheet" href="mobile.css" media="(max-width:320px)">
2.2 css引入meta
@media (min-width: 769px) {
body{
background-color: red;
}
}
@media (max-width:768px ) {
body{
background-color: orange;
}
}
@media (max-width:425px ) {
body{
background-color: yellow;
}
}
@media (max-width:375px ) {
body{
9 background-color: green;
}
}
@media (max-width:320px ) {
body{
background-color: #fff;
}
}
3. 动态 rem 方案
我们知道rem是由根元素html的font-size决定的，我们写css的时候可以采用这个单位。首先
获取当前页面的宽度，然后用js动态设置根元素html的font-size,舍得html的font-size和当前页面的宽度有关系，这样用css设置元素宽度时，不管什么样的页面,各个元素都会成比例排布。当然最后，我们还需要加meta viewport。
script.js
var pageWidth=window.innerWidth
document.write(`<style>html{ font-size:${pageWidth/10}px</style>`>
style.css
*{
margin: 0;
padding: 0;
}
body{
font-size:16px;
}
.child{
text-align: center;
width: 4rem;
background-color: #ccc;
float: left;
margin: 0.5rem;
height: 2rem;
line-height: 2rem;
}
.parent{
background-color: #00f;
}
.clearfix::after{
content:' ';
display: block;
clear:both;
}
