移動(dòng)端大行其道，rem/em、百分比、響應(yīng)式方案更是層出不窮，看見(jiàn)周圍的伙伴們都在對(duì)使用rem和百分比情有獨(dú)鐘，可我卻偏不愛(ài)，之所以出現(xiàn)如此多的方法，其目的只有一個(gè)屏幕適配。
屏幕適配顧名思義就是一張?jiān)O(shè)計(jì)稿還原出的程序要適應(yīng)于當(dāng)下市場(chǎng)上各種大小屏幕不一的終端，做到寫一次各種終端大小的屏幕都能比例協(xié)調(diào)的顯示。下面我們先來(lái)看下大家耳熟能詳?shù)膸追N方案是如何去解決屏幕適配的。
-
rem/em：rem根元素字體大小單位，em元素字體大小單位。使用rem的時(shí)候我們需要在css中先為html元素設(shè)定font-size屬性，其作為整個(gè)頁(yè)面單位的元單位，這個(gè)大小要設(shè)置為多少呢？這要依據(jù)設(shè)計(jì)圖和屏幕尺寸來(lái)決定，通常我們還需要使用js來(lái)優(yōu)先判斷當(dāng)前要適配屏幕的大小，之后去動(dòng)態(tài)的更改html中的font-size大小；而em這個(gè)單位和百分比相似，子類的大小受其父類控制，比如父類的font-size為16px，在子類中我們寫0.5em極為8px，這樣一級(jí)一級(jí)的嵌套寫下來(lái)，最后我們要做也是通過(guò)js來(lái)判斷當(dāng)前要適配屏幕的尺寸，去更改最高層級(jí)上的font-size。
-
百分比：em玩膩了，換個(gè)新的玩法，而且在em使用中，如果適配器尺寸判斷位置稍有不適，頁(yè)面會(huì)出現(xiàn)頓閃，不適合新人玩，如果你現(xiàn)在要做一個(gè)撐滿全屏幕的移動(dòng)網(wǎng)站，那么最佳的選擇方案莫過(guò)于百分比布局了。所以的尺寸都除以設(shè)計(jì)圖的總寬高給定一個(gè)百分比即可。
-
響應(yīng)式：響應(yīng)式是pc和移動(dòng)端一站式的解決方案，通過(guò)css3的媒體查詢?nèi)ヅ袛喈?dāng)前終端的屏幕尺寸來(lái)決定當(dāng)下要顯示元素。
以上所有的方法都需要事先獲知適配器當(dāng)下的尺寸，百分比布局雖然不需要，但是他的優(yōu)勢(shì)更適合于做全屏鋪滿的網(wǎng)站，那有沒(méi)有一種方案是直接相對(duì)于屏幕大小而言呢？畢竟我們最終目的也是屏幕適配，答案就是本問(wèn)給大家推薦的css屬性vw和vh--viewport width/height，視口的寬高，指代的是瀏覽器內(nèi)部的可是區(qū)域的寬高，1vw等于視口寬度的1%，很明顯這個(gè)單位是以視口也就是屏幕大小作為評(píng)估依據(jù)的，正合我們意，我們先來(lái)看他們的支持情況。
