meta viewport
在head中加上
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
寬度等于設(shè)備寬度仲锄，initial-scale表示初始縮放比例，maximum-scale呢岗，minimum-scale分別表示最大冕香，最小縮放比例，user-scalable表示是否允許用戶縮放
媒體查詢
媒體查詢敷燎，簡而言之就是根據(jù)不同的媒體(手機(jī)暂筝，平板，電腦等等)的查詢條件硬贯，展示不同的樣式焕襟，使用列子如下
@media (max-width: 800px){
body{
background: red;
}
}
如果某個(gè)媒體寬度小于800，那么body就變紅饭豹，通過這種滿足媒體的查詢條件（移動端只要滿足移動端對應(yīng)的條件）鸵赖，才展示某種樣式务漩，從而做到適配
動態(tài) rem 方案
百分比布局
//html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百分比布局</title>
</head>
<body>
<div class="container clearfix">
<div class="box">40%</div>
<div class="box">40%</div>
<div class="box">40%</div>
<div class="box">40%</div>
</div>
</body>
</html>
//css
*{
margin: 0;
padding: 0;
}
.clearfix::after{
content: '';
display: block;
clear: both;
}
.box{
background: #ddd;
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
}
.box{
float: left;
width: 40%;
margin-left: 5%;
margin-right: 5%;
}
這種是通過設(shè)置元素寬度百分比來自適應(yīng)，但是這種方法它褪，高度沒法確定饵骨，相當(dāng)于將元素拉長了，很不好看茫打，所以推薦使用下面的更好看的動態(tài) rem 方案
動態(tài) rem 方案
這種方法的思路是整體縮放居触，實(shí)現(xiàn)方式如下
①首先通過js讓html的font-size和頁面寬度相等或成倍數(shù)關(guān)系，目的是為了讓rem和頁面寬度掛鉤老赤，從而頁面寬度變化的時(shí)候轮洋，rem的值也會變化
//html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>動態(tài)rem</title>
<script>
var pageWidth = window.innerWidth
document.write('<style>html{font-size:' + pageWidth/10 + 'px}</style>')
</script>
</head>
<body>
<div class="container clearfix">
<div class="box">40%</div>
<div class="box">40%</div>
<div class="box">40%</div>
<div class="box">40%</div>
</div>
</body>
</html>
②然后頁面上除了字體或者小單位長度（比如border），其他的諸如元素的長度抬旺，寬度弊予，間距等都用rem來表示。這樣每次縮放頁面刷新后开财，rem的值都會根據(jù)頁面的寬度的縮放等比縮放
//css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.clearfix::after{
content: '';
display: block;
clear: both;
}
body{
font-size: 16px;
}
.box{
background: #ddd;
text-align: center;
float: left;
width: 4rem;
height: 2rem;
margin: .5rem .5rem;
border: 1px solid red;
font-size: 1.2em;
}
補(bǔ)充：px自動轉(zhuǎn)換為rem
上面的每一個(gè)rem都要計(jì)算汉柒，是不是覺得挺煩的，那么我們可以通過在在 SCSS 里使用 PX2REM來自動將px變成rem责鳍，以下是使用步驟
① 安裝node-sass
- npm config set registry https://registry.npm.taobao.org/
- touch ~/.bashrc
- echo 'export SASS_BINARY_SITE="https://npm.taobao.org/mirrors/node-sass"' >> ~/.bashrc
- source ~/.bashrc
- npm i -g node-sass
②編寫對應(yīng)的sass文件碾褂，使用px編寫
- mkdir ~/Desktop/scss-demo
- cd ~/Desktop/scss-demo
- mkdir scss css
- touch scss/style.scss
- 編寫 scss/style.scss
//style.scss文件
@function px2rem( $px ){
@return $px/$designWidth*10 + rem;
}
$designWidth : 640; // 640 是設(shè)計(jì)稿的寬度，你要根據(jù)設(shè)計(jì)稿的寬度填寫历葛。即開發(fā)基準(zhǔn)的頁面寬度斋扰，在這個(gè)寬度的頁面下用px開發(fā)
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.clearfix::after{
content: '';
display: block;
clear: both;
}
body{
font-size: 16px;
}
.box{
background: #ddd;
text-align: center;
float: left;
width: px2rem(256);
height: px2rem(128);
margin: px2rem(32) px2rem(32);
border: 1px solid red;
font-size: 1.2em;
}
③執(zhí)行轉(zhuǎn)換，得到px轉(zhuǎn)換成rem的css文件
- node-sass -wr scss -o css
注意直接運(yùn)行node-sass -wr scss -o css是不會得到css文件的啃洋，這個(gè)命令是一個(gè)監(jiān)聽的命令传货，必須在執(zhí)行這行命令后保存一下之前編輯的style.scss文件才會得到轉(zhuǎn)換后的css文件
//轉(zhuǎn)換后的style.css文件
* {
margin: 0;
padding: 0;
box-sizing: border-box; }
.clearfix::after {
content: '';
display: block;
clear: both; }
body {
font-size: 16px; }
.box {
background: #ddd;
text-align: center;
float: left;
width: 4rem;
height: 2rem;
margin: 0.5rem 0.5rem;
border: 1px solid red;
font-size: 1.2em; }
