一、視口（viewport）
移動前端的viewport就是瀏覽器中用於呈現網頁的區域。視口通常並不等於螢幕大小。手機端和pc端視口存在差異，電腦端視口等於其解析度，手機端的視口與解析度無關，等於裝置廠家所指定的寬度。
移動端基本視口解析度設定為980px。
約束視口
width=device-width 視口為裝置寬度（就是人設定的乙個寬度）//不設定的話預設為980px
initial-scale=1.0 初始化的視口大小是1.0倍
maximum-scale=1.0 最大的倍數是1.0倍
user-scalable=0 不允許縮放視口
這個視口的標籤告訴瀏覽器怎麼渲染網頁。在這裡，標籤想表達的意思是：按照裝置的寬度（device-width）來渲染網頁內容。事實上，在支援這個標籤的裝置上給你看一看效果，你就明白了。
二、img
宣告max-width規則，就是要保證所有最大顯示為其自身的100%（即最大只可以顯示為自身那麼大）。此時，如果包含的元素（比如包含的body或div）比固有寬度小，會縮放佔滿最大可用空間。
三、流式布局
百分比布局也叫作流式布局、彈性盒布局。手機網頁沒有版心，都左右撐滿。
百分比能夠設定的屬性是width、height、padding、margin。其他屬性比如border、font-size不能用百分比設定的。
在指定乙個元素的的值為百分比的時候，有以下規則
border不能用百分比來指定！
四，**查詢
@media screen and()
@media就表示**查詢，查詢現在看這個網頁的裝置是什麼，以及它的寬度是多少。screen表示看這個網頁的裝置是顯示器，而不是殘疾人聽力裝置、也不是印表機。後面用and符號羅列所有的可能性。
五、rem響應式布局
rem響應式布局思想
一般不要給元素設定具體的寬度，但是對於一些小圖示就可以設定具體的寬度值。
高度值可以設定固定值。
所有設定的固定值都用rem做單位，（首先在html中設定乙個基準值：px和rem的對應比例,然後在效果圖上獲取px值,布局的時候轉化為rem值）
js獲取真實螢幕的寬度，讓其處於設計稿的寬度，算出比例，把之前的基準值按照比例進行重新的設定，這樣專案就可以在移動端自適應了。
如何做個rem響應式布局
1.拿到設計稿後在樣式中給html設定乙個font-size的值，一般都設定乙個方便後面計算的值，例如100px
html
2.寫頁面，寫樣式
首先按照設計稿的尺寸來寫樣式，然後在寫樣式值的時候，需要把得到的畫素值除以100計算出對應的rem的值
真實專案中外層盒子的寬度我們一般還是不寫固定值，沿用流式布局法的思想，我們用百分比的方式布局
margin:0 0.2rem
height:3rem;
3.根據當前螢幕的寬度和設計稿的寬度來計算我們html的font-size的值。
設計稿寬度為640px,其中有乙個部分是輪播圖，它的尺寸是600*300，在樣式中給html設定乙個font-size的值為100px,則輪播圖大小應該為 6rem×3rem，那如果手機螢幕寬度為375px,其font-size應該設定為多少。
375/640*100->fontsize=58.59375//此時輪播圖能自適應手機螢幕大小
根據當前螢幕寬度和設計稿寬度的比例，動態計算一下當前寬度下的fontsize值應該是多少，如果fontsize的值改變了，之前設定的所有rem單位的值自動會跟著放大或者縮小。
//html部分
//js部分
響應式布局 響應式布局技巧
一理解幾種布局的概念 1 靜態布局 static layout 即傳統web設計，對於pc設計乙個layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分 意思就是不管瀏覽器尺寸具體是多少，網頁布局就按照當時寫 的布局來布置 對於移動裝置，單獨設計乙個布局，使用不同的網域名稱如wap...
響應式布局
裝置高度 device width,device height 渲染視窗的寬高 width,height 裝置的手持方向 orientation 裝置的解析度 resolution 使用方法 用外聯或者內嵌樣式 或者兩者同時搭配使用。裝置高度 device width,device height 表...
響應式布局
首先，什麼是響應式布局呢？響應式布局是2010年5月提出的乙個概念，簡單地說就是乙個 能夠相容多個終端，而不是為每個終端做乙個特定的版本。這個概念是為了解決移動網際網路瀏覽器而產生的，目的是為使用者提供更加舒適的介面以及良好的使用者體驗。優點 1.面對不同解析度裝置靈活性強 2.能夠方便的解決多裝置...