移動web（一）移動web基礎知識點、流式佈局
1、爲什麼要去研究移動web
移動web已經從趨勢變成了一個主流了，互聯網的流量入口已經大於PC端的流量入口
2、兼容性問題
在國內的移動web瀏覽器絕大部分都是基於webkit內核的，所以一些css3和h5的新特性絕大部分都被支持，需要添加前綴，但是，不同機型之間可能會略有不同，所以需要自己踩坑。
3、移動web和PC相比的差異性在哪裏
移動web的只要核心就是做自適應的佈局，在手持設備上基本都是通欄，並且佈局的細節比PC端要少，文字內容和模塊也相對偏少
4、移動端常見的佈局–流式佈局（百分比佈局）
【1】流式佈局（百分比佈局）
流式佈局是移動web開發使用的常用佈局方式之一。
【2】流式佈局下的幾個頁面特徵：
- 寬度自適應，高度寫死，不能百分百去還原設計圖
- 一些小ICON 圖標等都是寫死的 不是所有的東西都是自適應的，一般都是模塊會呈現自適應
- 一些產品插入圖也就是img等都默認設置寬度百分百，讓其自動保持等比例縮放，一般不予寫死
字體大小等都是寫死的
【注意】常用的是rem結合流式佈局的寫法，使用rem去計算高度，百分比去計算寬度，實現寬高完全自適應。
【3】移動端經典的幾個模塊佈局
1）左側固定，右側自適應
左側盒子直接寫死寬高，並且浮動；右側盒子直接不寫寬，直接用margin-left去擠出距離，這個盒子默認會自動內減
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左側固定右側自適應</title>
<style>
* {
margin: 0;
padding: 0;
}
.left {
width:150px;
height:400px;
float: left;
background: pink;
}
.right {
margin-left: 150px;
height:400px;
background: yellow;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
</html>2）聖盃佈局（兩側固定，中間自適應 ）
左右的盒子都寫固定的寬高，然後分別左浮動 右浮動，中間的盒子直接用margin去擠出距離，不寫寬自動內減，右邊html裏面浮動的結構一定要放到標準流盒子的前面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>聖盃佈局（兩側固定中間自適應）</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
width:100%;
height:400px;
}
.left {
width:150px;
height:400px;
float: left;
background: pink;
}
.right {
width:150px;
height:400px;
float: right;
background: yellow;
}
.center {
margin-left: 150px;
margin-right: 150px;
height:400px;
background: blue;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
</body>
</html>3）右側盒子固定，左側自適應
右側盒子直接寫死寬高，並且浮動，左側盒子直接不寫寬，直接用margin-left去擠出距離，這個盒子默認會自動內減，注意：右側盒子在結構上在左側盒子的前面，先浮動，後標準
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>右側固定左側自適應</title>
<style>
* {
margin: 0;
padding: 0;
}
.right {
width:200px;
height:400px;
float: right;
background: green;
}
.left {
margin-right: 200px;
height:400px;
background: yellow;
}
</style>
</head>
<body>
<div class="right"></div>
<div class="left"></div>
</body>
</html>4）中間固定，兩邊自適應
中間盒子直接寫死寬高，並且定位居中，左右側盒子直接width百分50%，並且浮動，並配合padding和內減去實現自適應
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>中間固定兩側自適應</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
width:80%;
height:400px;
margin:0 auto;
background: gray;
}
.left {
width:50%;
height:100%;
float: left;
background: green;
padding-right: 50px;
box-sizing:border-box;
/*
在設置了box-sizing爲border-box後，
容器的高寬就是實際容器的高寬，
而不是單純指的是內容區的大小。
這時候的高寬計算方式把padding和border大小也算進來了。
*/
}
.right {
width:50%;
height:100%;
float: right;
background: blue;
padding-left: 50px;
box-sizing:border-box;
}
.center {
width:100px;
height: 400px;
background: orange;
margin:0 auto;
position: relative;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
</body>
</html>5）等分佈局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>等分佈局</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
width:100%;
height:400px;
background: gray;
}
.content {
width:25%;
height:100%;
float: left;
}
.one {
background: red;
}
.two {
background: yellow;
}
.three {
background: green;
}
.four {
background: blue;
}
</style>
</head>
<body>
<div class="wrap">
<div class="content one"></div>
<div class="content two"></div>
<div class="content three"></div>
<div class="content four"></div>
</div>
</body>
</html>