css中vw有兼容問題。vw的兼容性:1、桌面PC中,vw兼容Chrome26、Firefox19、Safari6.1、IE10和Opera15以上的版本;2、移動(dòng)設(shè)備中,vw兼容Android4.4和iOS8以上的版本。
本教程操作環(huán)境:windows10系統(tǒng)、CSS3&&HTML5版本、Dell G3電腦。
css中vw有沒有兼容問題
桌面 PC
Chrome:自 26 版起就完美支持(2013年2月)
Firefox:自 19 版起就完美支持(2013年1月)
Safari:自 6.1 版起就完美支持(2013年10月)
Opera:自 15 版起就完美支持(2013年7月)
IE:自 IE10 起(包括 Edge)到現(xiàn)在還只是部分支持(不支持 vmax,同時(shí) vm 代替 vmin)
移動(dòng)設(shè)備
Android:自 4.4 版起就完美支持(2013年12月)
iOS:自 iOS8 版起就完美支持(2014年9月).
擴(kuò)展知識(shí):
(1)vw、vh、vmin、vmax 是一種視窗單位,也是相對(duì)單位。它相對(duì)的不是父節(jié)點(diǎn)或者頁面的根節(jié)點(diǎn)。而是由視窗(Viewport)大小來決定的,單位 1,代表類似于 1%。
視窗(Viewport)是你的瀏覽器實(shí)際顯示內(nèi)容的區(qū)域—,換句話說是你的不包括工具欄和按鈕的網(wǎng)頁瀏覽器。
(2)具體描述如下:
-
vw:視窗寬度的百分比(1vw 代表視窗的寬度為 1%)
-
vh:視窗高度的百分比
-
vmin:當(dāng)前 vw 和 vh 中較小的一個(gè)值
-
vmax:當(dāng)前 vw 和 vh 中較大的一個(gè)值
vw、vh與%百分比的區(qū)別
(1)% 是相對(duì)于父元素的大小設(shè)定的比率,vw、vh 是視窗大小決定的。
(2)vw、vh 優(yōu)勢在于能夠直接獲取高度,而用 % 在沒有設(shè)置 body 高度的情況下,是無法正確獲得可視區(qū)域的高度的,所以這是挺不錯(cuò)的優(yōu)勢。
(學(xué)習(xí)視頻分享:css視頻教程)