一、px與視口
1.像素：一個像素表示了計算機屏幕所能顯示的最小區域，分為css像素（css中使用的一個抽象單位）和物理像素（只與設備的硬件密度有關）
2.視口--理想視口（理想的布局視口、在移動設備中指設備的分辨率===>給定設備物理像素的情況下，最佳的布局視口）1css 像素 = 物理像素/分辨率
在meta標簽中會將width設置為decive-width，即將布局視口設置成了理想的視口
當屏幕大小改變時，更新當前的寬度
3.px與自適用
通常pc端的布局視口是980px，移動端iphone6是375，現在有一個750px*1134px的視覺稿，那么有：
pc:1 css 像素 = 750/980 = 0.76px; iphpne6:1css = 750/375=2px
因此如果只在css中通過px作為長度和寬度的話，就會使得結果無法通過一套樣式實現各端的自適應。
二、媒體查詢
使用@media媒體查詢可以針對不同的媒體類型定義不同的樣式，尤其是響應式頁面，可以針對不同屏幕的大小編寫多套樣式，從而達到自適用的效果。
缺點是：瀏覽器的大小改變時，需要改變的樣式太多，多套代碼會繁瑣。
三、百分比
除了用px結合媒體查詢實現響應式布局外，也可以使用百分比單位%來實現響應式的效果。
1、百分比的具體分析
子元素的height和width使用的百分比是相對於子元素的直接父元素；
子元素的top和bottom使用的百分比是相對於直接非static定位父元素的height;
子元素的left和right使用的百分比是相對於直接非static定位父元素的width;
子元素的padding和margin使用的百分水平方向與垂直方向都是相對於直接父元素的width;
例如實現一個長寬為4:3的長方形
用較多的百分比的缺點：計算困難，使布局變得復雜。
四、自適應場景下的rem解決方案
1.rem單位是一個靈活的、可擴展的單位，由瀏覽器轉化像素並顯示。與em單位不同的是rem單位無論嵌套層級如果，都只是相對於瀏覽器的根元素（HTML元素）的font-size。默認情況下，html元素的font-size為16px,即1rem = 16px
html{font-size:62.5%} 1rem = 16 *0.625 = 10px
2.通過rem來實現響應式布局
rem單位是相對於根元素html的font-size來決定大小的，即根元素的font-size提供了一個基准，當頁面的size發生改變時，只需要改變font-size的值，那么以rem固定單位的元素的大小也會發生響應的變化。即通過rem來實現響應式的布局，只需要根據視圖容器的大小，動態改變font-size即可。
如果我們要將所有的布局單位都用rem表示，高效的方法是在css中我們還是用px來表示元素的大小，最后編寫完css代碼之后，將css文件的所有px單位，轉化為rem單位。使用px2rem，預處理以px為單位的css文件，處理后將所有的px變成rem單位，可以通過webpack loader的形式和webpack中使用postcss plugin來實現。
五、通過vw/vh來實現自適應
任意層級元素，在使用vw單位的情況下，1vw都等於視圖寬度的百分之一。