移動佈局基礎之 流式佈局

移動端除錯方法
1.Chrome DevTools(谷歌瀏覽器)的模擬手機除錯
2.搭建本地web伺服器，手機和伺服器一個區域網，通過手機訪問伺服器
3.使用外網伺服器，直接IP域名訪問

移動端瀏覽器我們主要對webkit核心進行相容
我們現在開發的移動端主要針對手機開發
現在移動端碎片化比較嚴重，解析度和螢幕大小尺寸不一
學會用谷歌瀏覽器模擬手機頁面以及除錯

視口
viewport就是瀏覽器顯示頁面內容的螢幕區域，視口可以分為佈局視口，視覺視口和理想視口
1.1 佈局視口(layout viewport):用於解決早期PC端頁面在手機端顯示的問題，但是元素看上去很小，不適合做頁面開發
1.2 視覺視口(visual viewport):是使用者正在看到的網站的區域，可以操作視覺視口，但不影響佈局視口
1.3 理想視口(ideal viewport):為了使網站在移動端有最理想的瀏覽寬度，對於裝置來講是最理想的視口尺寸，需要手動填寫meta視口標籤通知瀏覽器操作
裝置有多寬，佈局的視口就多寬

2.1 meta標準視口標籤：

width: viewport的寬度，可以設定device-width特殊值
inital-scale: 初始縮放比，大於0的數字
maximum-scale: 最大縮放比，大於0的數字
minimum-scale: 最小縮放比，大於0的數字
user-scale: 使用者是否可以縮放

3.1 物理畫素&物理畫素比:
物理畫素點是螢幕顯示的最小顆粒，是真實存在的，就是解析度
PC端1px等於一個物理畫素，但移動端不盡相同
一個px能顯示的物理畫素點的個數，叫物理畫素比
Retina(視網膜螢幕)是一種顯示技術，可以把更多的物理畫素點壓縮在一塊螢幕裡，從而達到更高的解析度
3.2 多倍圖
3.3 背景縮放(background-size)
單位： 長度/百分比/cover/contain
cover把背景影像擴充套件至足夠大，以使背景影像完全覆蓋背景區域
contain把影像擴充套件至最大尺寸，以使其寬高適應內容區域

4.1 移動端主流方案
1.單獨製作移動端頁面 2.響應式頁面相容移動端
4.2 單獨移動端頁面
通常情況下，網址域名前加m(mobile)可以開啟移動端，通過判斷裝置，如果是移動端開啟，就跳至移動端
4.3 響應式頁面相容移動端
通過判斷螢幕寬度來改變樣式，以適應不同終端
5. 移動端技術解決方案
5.1 移動端瀏覽器
考慮webkit相容性問題 放心使用css樣式和h5標籤 瀏覽器私有標籤考慮新增webkit
5.2 css初始化 normalize.css
保護了有價值的預設值 修復了瀏覽器bug 是模組化的 擁有詳細文件
5.3 css3盒子模型 box-sizing
css3盒子模型中，padding和border不會撐大盒子
移動端可以全部css3盒子模型
PC端如果完全需要相容，就用傳統模式
5.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; }
6. 移動端常見佈局
1.單獨製作移動端頁面：
流式佈局（百分比佈局）：通過盒子的寬度設定成百分比來根據螢幕的寬度進行伸縮，是web開發比較常見的佈局
max-width(height) 最大寬高 min-width(height) 最小寬高
flex彈性佈局
less+rem+媒體查詢佈局
混合佈局
2.響應式頁面相容移動端
媒體查詢
bootstarp