按照父布局的寬高進行百分比分隔，以此來確定檢視的大小。
但是要想設定當前容器的高度或寬度百分比，必須「明確」知道父容器的高度或寬度。
一般都是對寬度進行百分比的設定，高度使用內容撐起
寬度隨裝置寬度變化的時候，內容不會改變大小，如文字就很容易出現不能正常顯示的情況
頁面元素寬度變化，背景會出現變形，文字大小不變化，就會出現換行撐高元素，都會會影響到頁面原本布局
即使設定乙個內容能正常顯示的最小寬度min-width，那麼在小解析度下也很可能出現不能做到平鋪整個螢幕的狀況，也就是會出現滾動條
響應式的實現是利用**查詢@media，bootstrap下的柵格布局，主要就是利用**查詢及百分比布局實現的
通過**查詢對不同寬度的裝置適配不同的css規則，來達成對頁面的適配
//如果頁面寬度小於 300 畫素,則body的背景顏色為紅色
@media screen and (max-width: 300px)
}
在我們平常的網頁布局過程中經常使用絕對單位畫素(px)來進行布局，這樣的布局不適合我們自適應網頁的實現，所以介紹兩種常見的相對單位em和rem。em（font size of the element）是指相對于父元素的字型大小的單位，根據父元素的字型大小計算出元素本身各種尺寸。rem（font size of the root element）是css3新增的乙個相對單位，與em不同的是它根據html根元素來計算字型的大小，通過根元素的調整就可整體調整頁面的各種尺寸。可以通過js獲取螢幕寬度，然後動態設定html字型大小，最後使用rem相對尺寸單位，讓頁面根據html字型大小改變整體的尺寸
//螢幕寬度
var winwidth = window.innerwidth;
//750是設計圖的實際大小
document.documentelement.style.fontsize = (winwidth / 750) * 100 + 'px';
PC端和移動端自適應問題解決方法
簡單理解為可視區域最大寬度為600px，即大於600px下不生效。media screen and max width 600px 簡單理解為可視區域最小寬度為900px，即大於900px下生效。media screen and min width 900px 總結為 如果對min 就是如果寬度在大...
移動端自適應
1 js動態設定html的字型大小 var clientwidth 0 if document.documentelement.clientwidth 600 else document.documentelement.style.fontsize 50 clientwidth 375 px win...
移動端自適應
width device width width為設定layout viewport 的寬度，為乙個正整數，width device 表示寬度是裝置螢幕的寬度 initial scale 1.0 initial scale為設定頁面的初始縮放值，可以是乙個帶小數的數字，1.0就是佔網頁的100 mi...