4. 移動端開發選擇
1. 移動端主流方案
1.單獨製作移動端頁面（主流）： 京東商城手機版、淘寶觸屏版、蘇寧易購手機版。
2.響應式頁面兼容移動端（其次）三星手機官網。
2.單獨移動端頁面（主流）
通常情況下，網址域名前面加m（moblie）可以打開移動端。通過判斷設備，如果是移動設備，如果是移動設備打開，則跳轉到移動端頁面。
比如： m.taobao.com m.jd.com m.suning.com
3. 響應式兼容PC移動端
三星電子官網： www.sansung.com/cn/，通過判斷屏幕寬度來改變樣式，以適應不同終端。
缺點： 製作麻煩，需要花很大精力去調兼容性問題。
4. 總結：
現在市場常見的移動端開發有單獨只做移動端頁面和響應式頁面兩種方案。
現在市場主流的選擇還是 單獨製作移動端頁面。
5. 移動端技術解決方案
1. 移動端瀏覽器
1.移動端瀏覽器基本以webkit內核爲主，因此我們就考慮webkit兼容性問題。
2.我們可以放心使用h5標籤和CSS3樣式。
3.同時我們瀏覽器的私有前綴我們只需要考慮添加webkit即可。
2. CSS初始化 normalize.css
移動端css初始化推薦使用 normalize.css/
1.Nrmalize.css ： 保護了有價值的默認值。
2.Nrmalize.css ： 修復了瀏覽器的bug。
3.Nrmalize.css ： 是模塊化的。
4.Nrmalize.css ： 擁有詳細的文檔。
官網地址：
http://necolas.github.io/normalize.css/
3. css3 盒子模型 box-sizing
傳統模式寬度計算:盒子的寬度= css中設置的width + border + padding
css3盒子模型： 盒子的寬度= css中設置的寬度width裏面包含了border和padding
也就是說，我們的css3中的盒子模型， padding和border不會撐大盒子了。
/*css3盒子模型*/
box-sizing： border-box；
/*傳統盒子模型*/
box-aizing： content-box；
傳統or css3 盒子模型？
移動端可以全部css3盒子模型
PC如果完全需要兼容，我們就用傳統模式，如果不考慮兼容性，我們就選擇css3盒子模型。
命令演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div:nth-child(1){
/* 傳統盒子模型= width + border + padding */
width: 200px;
height: 200px;
background-color: chartreuse;
padding: 10px;
border:10px solid red;
box-sizing: content-box;
}
div:nth-child(2){
/* 有了這句話就讓盒子變成css盒子模型 */
/* padding 和 border 不會再撐大盒子了 */
box-sizing: border-box;
width: 200px;
height: 200px;
background-color: cornflowerblue;
padding: 10px;
border: 10px solid blue;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
網頁顯示圖：
4. 特殊樣式
/*css3盒子模型*/
box-sizing：border-box；
-webkit-box-sizing：border-box；
/*點擊高亮我們需要清除清除 設置爲 transparent 完全透明*/
-webkit-tap-highlight-color: transparent;
/*在移動端瀏覽器默認的外觀在iOS上加上這個屬性才能給按鈕和輸入框自定義樣式*/
-webkit-appearance：none；
/*禁用長按頁面時的彈出菜單*/
img,a {-webkit-touch-callout: none;}
命令演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
a{
-webkit-tap-highlight-color: transparent;
}
input{
-webkit-appearance: none;
}
</style>
</head>
<body>
<a href="#">含成員</a>
<input type="button" value="按鈕">
</body>
</html>
6.移動端常見佈局
1. 移動端技術選型
移動端佈局和以前我們學習的PC端有所區別：
1. 單獨製作移動端頁面（主流）
流式佈局（百分比佈局）
flex 彈性佈局（強烈推薦）
less+rem+媒體查詢佈局
混合佈局
2. 響應式頁面兼容移動端（其次）
媒體查詢
bootstarp
3. 流式佈局（百分比佈局）
流式佈局，就是百分比佈局，也稱非像素佈局。
通過盒子的寬度設置成百分比來根據屏幕的寬度來進行伸縮，不受固定像素的限制，內容向兩個側填充。
流式佈局方式是移動web開發使用的比較常見的佈局方式。
max-width 最大寬度 （max-height 最大高度）
min-width 最大寬度 （min-height 最小高度）
命令演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
section{
width: 100%;
max-width: 980px;
min-width: 320px;
}
section div{
float: left;
width: 50%;
height: 400px;
}
section div:nth-child(1){
background-color: chartreuse;
}
section div:nth-child(2){
background-color: cornflowerblue;
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
</section>
</body>
</html>
網頁顯示圖：
