寫在開篇前——移動端基礎(chǔ)
眾所周知，pc端呢目前處于一種三家分晉，即三種內(nèi)核（webkit，blink，gecko），當然算上馬上要更換內(nèi)核的IE那就是四個。而我們的移動端呢，那就是萬余基于webkit了，所以各位進行移動端web開發(fā)時，只考慮webkit的適配就可以了，怎么樣，開不開心 ？
我們先來看看什么是視口，視口就是瀏覽器顯示頁面內(nèi)容的屏幕區(qū)域。 視口可以分為布局視口、視覺視口和理想視口，他又可以分成一下四種
0.1布局視口 layout viewport
一般移動設(shè)備的瀏覽器都默認設(shè)置了一個布局視口，用于解決早期的PC端頁面在手機上顯示的問題。
iOS, Android基本都將這個視口分辨率設(shè)置為 980px，所以PC上的網(wǎng)頁大多都能在手機上呈現(xiàn)，只不過元素看上去很小，一般默認可以通過手動縮放網(wǎng)頁。
0.2視覺視口 visual viewport
字面意思，它是用戶正在看到的網(wǎng)站的區(qū)域。注意：是網(wǎng)站的區(qū)域。
我們可以通過縮放去操作視覺視口，但不會影響布局視口，布局視口仍保持原來的寬度。
0.3理想視口 ideal viewport(推薦用這個)
為了使網(wǎng)站在移動端有最理想的瀏覽和閱讀寬度而設(shè)定
理想視口，對設(shè)備來講，是最理想的視口尺寸
需要手動添寫meta視口標簽通知瀏覽器操作
meta視口標簽的主要目的：布局視口的寬度應(yīng)該與理想視口的寬度一致，簡單理解就是設(shè)備有多寬，我們布局的視口就多寬
最標準的viewport設(shè)置
視口寬度和設(shè)備保持一致
視口的默認縮放比例1.0
不允許用戶自行縮放
最大允許的縮放比例1.0
最小允許的縮放比例1.0
ps：注意二倍圖或者三倍圖問題
1.流式布局（百分比布局）
流式布局，就是百分比布局，也稱非固定像素布局。
通過盒子的寬度設(shè)置成百分比來根據(jù)屏幕的寬度來進行伸縮，不受固定像素的限制，內(nèi)容向兩側(cè)填充。
流式布局方式是移動web開發(fā)使用的比較常見的布局方式。
2.flex布局(推薦布局方式)
父盒子開啟display：flex后，默認為不換行，所以使用flex-wrap：wrap；使其換行
使用justify-content: space-around; 使其子盒子主軸間距平均分配
使用align-content: space-around; 使其子盒子側(cè)軸間距平均分配
3.rem布局
方案1
①假設(shè)設(shè)計稿是750px
②假設(shè)我們把整個屏幕劃分為15等份（劃分標準不一可以是20份也可以是10等份）
③每一份作為html字體大小，這里就是50px
④那么在320px設(shè)備的時候，字體大小為320/15就是? 21.33px
⑤用我們頁面元素的大小除以不同的 html字體大小會發(fā)現(xiàn)他們比例還是相同的
⑥比如我們以750為標準設(shè)計稿
⑦一個100100像素的頁面元素在? 750屏幕下，? 就是 100/ 50? 轉(zhuǎn)換為rem? 是? 2rem2rem? 比例是1比1
⑧320屏幕下，? html字體大小為21.33? 則 2rem=? 42.66px? 此時寬和高都是 42.66? 但是寬和高的比例還是 1比1
⑨但是已經(jīng)能實現(xiàn)不同屏幕下? 頁面元素盒子等比例縮放的效果
總結(jié)：
①最后的公式：頁面元素的rem值 =? 頁面元素值（px） /? （屏幕寬度? /? 劃分的份數(shù)）
②屏幕寬度/劃分的份數(shù)就是 htmlfont-size 的大小
③或者：頁面元素的rem值 =? 頁面元素值（px） /? html font-size 字體大小
方案2
1.less+rem+媒體查詢
2.lflexible.js+rem
4.響應(yīng)式布局
4.1原理
響應(yīng)式需要一個父級做為布局容器，來配合子級元素來實現(xiàn)變化效果。
原理就是在不同屏幕下，通過媒體查詢來改變這個布局容器的大小，再改變里面子元素的排列方式和大小，從而實現(xiàn)不同屏幕下，看到不同的頁面布局和樣式變化。
父容器版心的尺寸劃分
超小屏幕（手機，小于 768px）：設(shè)置寬度為 100%
小屏幕（平板，大于等于 768px）：設(shè)置寬度為 750px
中等屏幕（桌面顯示器，大于等于 992px）：寬度設(shè)置為 970px
大屏幕（大桌面顯示器，大于等于 1200px）：寬度設(shè)置為 1170px
但是我們也可以根據(jù)實際情況自己定義劃分
4.2引用bootstrap框架
直接拿Bootstrap 預(yù)先定義好的樣式來使用
修改Bootstrap 原來的樣式，注意權(quán)重問題
學好Bootstrap 的關(guān)鍵在于知道它定義了哪些樣式，以及這些樣式能實現(xiàn)什么樣的效果
