css_Unit

vh&vm

vh&vm

  • px: 使用螢幕幾個像素    -> (縮放螢幕的時候,不會隨著變動)
  • %: 相對父層的大小比例  ->(當div內並沒有任何內容,呈現的結果會是空白)
  • vh, vw: 相對於瀏覽器展示網頁區域的大小-->(隨著你的網頁縮放而改變 [不是整個瀏覽器的大小,沒包含瀏覽器的工具列,只有展示網頁的區域])
  • vmin: vh, vw取最小值(另外還有vmax則是取最大值,但是目前IE跟safari不支援)

JQuery:

$('div').width(screen.width);   //div tag寬度都等是螢幕寬度


$('div').width(screen.width * 0.75);  //想要30%的螢幕大小

 

參考網址:https://pjchender.blogspot.com/2015/04/css-3vh-vw.html