神奇“單位” 移動(dòng)端項(xiàng)目必備(vw钱雷、vh、vmin吹零、vmax )

1罩抗、vw、vh灿椅、vmin套蒂、vmax 基本概念

(1)vw、vh茫蛹、vmin操刀、vmax的含義

首先,vw婴洼、vh骨坑、vmin、vmax 是一種視窗單位柬采,也是相對(duì)單位欢唾。它相對(duì)的不是父節(jié)點(diǎn)或者頁面的根節(jié)點(diǎn)。而是由視窗(Viewport)大小來決定的警没,單位 1匈辱,代表類似于 1%。
視窗(Viewport)是你的瀏覽器實(shí)際顯示內(nèi)容的區(qū)域杀迹,換句話說是你的瀏覽器(不包括工具欄和按鈕)的區(qū)域亡脸。


ViewPort 區(qū)域 圖示
(2)具體描述如下:

vw:視窗寬度的百分比(1vw 代表視窗的寬度為 1%)。
vh:視窗高度的百分比树酪。
vmin:當(dāng)前 vw 和 vh 中較小的一個(gè)值浅碾。
vmax:當(dāng)前 vw 和 vh 中較大的一個(gè)值。


vw vh 示意圖

2续语,vw垂谢、vh 與 % 百分比的區(qū)別

(1)百分比“ % ” 是相對(duì)于父元素的大小設(shè)定的比率,vw疮茄、vh 則是依據(jù)當(dāng)前視窗大小決定的滥朱。
(2)vw、vh 優(yōu)勢(shì)在于能夠直接獲取高度力试,而用 % 在沒有設(shè)置 body 高度的情況下徙邻,是無法正確獲得可視區(qū)域的高度的,所以這是挺不錯(cuò)的優(yōu)勢(shì)畸裳。

3缰犁,vmin、vmax 用處

做移動(dòng)頁面開發(fā)時(shí),如果使用 vw帅容、wh 設(shè)置字體大衅南蟆(比如 5vw),在豎屏和橫屏狀態(tài)下顯示的字體大小是不一樣的并徘。
由于 vmin 和 vmax 是當(dāng)前較小的 vw 和 vh 和當(dāng)前較大的 vw 和 vh遣钳。這里就可以用到 vmin 和 vmax。使得文字大小在橫豎屏下保持一致饮亏。

4耍贾,瀏覽器兼容性(很久很久以前 已 完美支持各主流瀏覽器)

(1)桌面 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)

(2)移動(dòng)設(shè)備
Android:自 4.4 版起就完美支持(2013年12月)
iOS:自 iOS8 版起就完美支持(2014年9月)

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末路幸,一起剝皮案震驚了整個(gè)濱河市荐开,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌简肴,老刑警劉巖晃听,帶你破解...
    沈念sama閱讀 211,290評(píng)論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異砰识,居然都是意外死亡能扒,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,107評(píng)論 2 385
  • 文/潘曉璐 我一進(jìn)店門辫狼,熙熙樓的掌柜王于貴愁眉苦臉地迎上來初斑,“玉大人,你說我怎么就攤上這事膨处〖樱” “怎么了?”我有些...
    開封第一講書人閱讀 156,872評(píng)論 0 347
  • 文/不壞的土叔 我叫張陵真椿,是天一觀的道長(zhǎng)鹃答。 經(jīng)常有香客問我,道長(zhǎng)突硝,這世上最難降的妖魔是什么测摔? 我笑而不...
    開封第一講書人閱讀 56,415評(píng)論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮解恰,結(jié)果婚禮上锋八,老公的妹妹穿的比我還像新娘。我一直安慰自己护盈,他們只是感情好查库,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,453評(píng)論 6 385
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著黄琼,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上脏款,一...
    開封第一講書人閱讀 49,784評(píng)論 1 290
  • 那天围苫,我揣著相機(jī)與錄音,去河邊找鬼撤师。 笑死剂府,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的剃盾。 我是一名探鬼主播腺占,決...
    沈念sama閱讀 38,927評(píng)論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼痒谴!你這毒婦竟也來了衰伯?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,691評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤积蔚,失蹤者是張志新(化名)和其女友劉穎意鲸,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體尽爆,經(jīng)...
    沈念sama閱讀 44,137評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡怎顾,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,472評(píng)論 2 326
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了漱贱。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片槐雾。...
    茶點(diǎn)故事閱讀 38,622評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖幅狮,靈堂內(nèi)的尸體忽然破棺而出募强,到底是詐尸還是另有隱情,我是刑警寧澤彪笼,帶...
    沈念sama閱讀 34,289評(píng)論 4 329
  • 正文 年R本政府宣布钻注,位于F島的核電站,受9級(jí)特大地震影響配猫,放射性物質(zhì)發(fā)生泄漏幅恋。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,887評(píng)論 3 312
  • 文/蒙蒙 一泵肄、第九天 我趴在偏房一處隱蔽的房頂上張望捆交。 院中可真熱鬧,春花似錦腐巢、人聲如沸品追。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,741評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽肉瓦。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間泞莉,已是汗流浹背哪雕。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評(píng)論 1 265
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留鲫趁,地道東北人斯嚎。 一個(gè)月前我還...
    沈念sama閱讀 46,316評(píng)論 2 360
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像挨厚,于是被迫代替她去往敵國(guó)和親堡僻。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,490評(píng)論 2 348