百分比代表相對寬度/高度，問題在於這個值相對什麼。就是可以類似於相對定位的概念是相對于父元素的一般來說。而根元素body在沒有定義高度的情況下是沒有高度的。而vh、vw不同，永遠都是相對於視窗大小的，即便寫在font-size裡面也是按視窗大小。這個就會有很多很方便的地方了。所以用來開發多種螢幕裝置的應用用這個單位還是挺合適的。
em是相對於其父元素來設定字型大小的，這樣就會存在乙個問題，進行任何元素設定，都有可能需要知道他父元素的大小。em在實際應用的時候因為跟隨父元素所以盡量用在部分**片段中，要不然計算不方便。建議：如果是跟父元素成倍數關係縮放大小，可選擇em為單位；
rem是相對於根元素，這樣就意味著，我們只需要在根元素確定乙個參考值。這個單位可謂集相對大小和絕對大小的優點於一身，通過它既可以做到只修改根元素就成比例地調整所有字型大小，又可以避免字型大小逐層復合的連鎖反應。目前，除了ie8及更早版本外，所有瀏覽器均已支援rem。對於不支援它的瀏覽器，應對方法也很簡單，就是多寫乙個絕對單位的宣告。這些瀏覽器會忽略用rem設定的字型大小。下面就是乙個例子：
p
除了ie6-ie8r，其它的瀏覽器都支援em和rem屬性，px是所有瀏覽器都支援。因此為了瀏覽器的相容性，可「px」和「rem」一起使用，用」px」來實現ie6-8下的效果，然後使用「rem」來實現代瀏覽器的效果。px 與 rem 的選擇？
對於只需要適配少部分手機裝置，且解析度對頁面影響不大的，使用px即可 。
對於需要適配各種移動裝置，使用rem，例如只需要適配iphone和ipad等解析度差別比較挺大的裝置。
響應式布局 響應式布局技巧
一理解幾種布局的概念 1 靜態布局 static layout 即傳統web設計，對於pc設計乙個layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分 意思就是不管瀏覽器尺寸具體是多少，網頁布局就按照當時寫 的布局來布置 對於移動裝置，單獨設計乙個布局，使用不同的網域名稱如wap...
響應式布局
裝置高度 device width,device height 渲染視窗的寬高 width,height 裝置的手持方向 orientation 裝置的解析度 resolution 使用方法 用外聯或者內嵌樣式 或者兩者同時搭配使用。裝置高度 device width,device height 表...
響應式布局
首先，什麼是響應式布局呢？響應式布局是2010年5月提出的乙個概念，簡單地說就是乙個 能夠相容多個終端，而不是為每個終端做乙個特定的版本。這個概念是為了解決移動網際網路瀏覽器而產生的，目的是為使用者提供更加舒適的介面以及良好的使用者體驗。優點 1.面對不同解析度裝置靈活性強 2.能夠方便的解決多裝置...