首頁  >  文章  >  web前端  >  css中vw有沒有相容問題

css中vw有沒有相容問題

WBOY
WBOY原創
2022-04-27 18:05:443483瀏覽

css中vw有相容問題。 vw的相容性:1、桌面PC中,vw相容於Chrome26、Firefox19、Safari6.1、IE10和Opera15以上的版本;2、行動裝置中,vw相容於Android4.4和iOS8以上的版本。

css中vw有沒有相容問題

本教學操作環境:windows10系統、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)到現在還只是部分支援(不支援vmax,同時vm 取代vmin)

#行動裝置

Android:自4.4 版起就完美支援(2013年12月)

iOS:自iOS8 版起就完美支援(2014年9月).

擴展知識:

(1)vw、vh、vmin、vmax 是一種視窗單位,也是相對單位。它相對的不是父節點或頁面的根節點。而是由視窗(Viewport)大小來決定的,單位 1,代表類似 1%。

視窗(Viewport)是你的瀏覽器實際顯示內容的區域—,換句話說是你的不包含工具列和按鈕的網頁瀏覽器。

(2)具體描述如下:

  • vw:視窗寬度的百分比(1vw 代表視窗的寬度為1%)

  • vh:視窗高度的百分比

  • vmin:目前vw 和vh 中較小的一個值

  • vmax:目前vw 和vh 中較大的一個值

vw、vh與%百分比的差異

(1)% 是相對於父元素的大小設定的比率,vw、vh 是視窗大小決定的。

(2)vw、vh 優點在於能夠直接取得高度,而用 % 在沒有設定 body 高度的情況下,是無法正確獲得可視區域的高度的,所以這是挺不錯的優勢。

(學習影片分享:css影片教學

以上是css中vw有沒有相容問題的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn