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標(biāo)簽中加上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. 動態(tài) rem 方案
我們知道rem是由根元素html的font-size決定的扫尖，我們寫css的時候可以采用這個單位。首先
獲取當(dāng)前頁面的寬度禀综，然后用js動態(tài)設(shè)置根元素html的font-size,舍得html的font-size和當(dāng)前頁面的寬度有關(guān)系简烘，這樣用css設(shè)置元素寬度時，不管什么樣的頁面,各個元素都會成比例排布定枷。當(dāng)然最后孤澎，我們還需要加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;
}
