移動端布局適配(px,em,rem,vh,vw)

px

px就是pixel像素的縮寫畔乙,相對長度單位肠牲,網(wǎng)頁設(shè)計常用的基本單位拍嵌。像素px是相對于顯示器屏幕分辨率而言的

em

em是相對長度單位。相對于當(dāng)前對象內(nèi)文本的字體尺寸(參考物是父元素的font-size)
如當(dāng)前父元素的字體尺寸未設(shè)置摘符,則相對于瀏覽器的默認(rèn)字體尺寸
特點:
  1. em的值并不是固定的;
  2. em會繼承父級元素的字體大小

rem

rem是CSS3新增的一個相對單位淳附,rem是相對于HTML根元素的字體大幸槲俊(font-size)來計算的長度單位
如果你沒有設(shè)置html的字體大小,就會以瀏覽器默認(rèn)字體大小奴曙,一般是16px

html{font-size: 62.5%} /* 10 ÷ 16 × 100% = 62.5% */

body{font-size: 1.4rem;} /* 1.4 × 10px = 14px */

/在根元素中定義了一個基本字體大小為62.5%(也就是10px别凹。設(shè)置這個值主要方便計算,如果沒有設(shè)置洽糟,將是以“16px”為基準(zhǔn) )/
優(yōu)點是炉菲,只需要設(shè)置根目錄的大小就可以把整個頁面的成比例的調(diào)好
rem兼容性:除了IE8及更早版本外,所有瀏覽器均已支持rem
em與rem的區(qū)別:
  rem是相對于根元素(html)的字體大小坤溃,而em是相對于其父元素的字體大小
兩者使用規(guī)則:
*
如果這個屬性根據(jù)它的font-size進(jìn)行測量拍霜,則使用em
*
其他的一切事物屬性均使用rem

vw、vh

vw薪介、vh祠饺、vmax、vmin這四個單位都是基于視口
vw是相對視口(viewport)的寬度而定的汁政,長度等于視口寬度的1/100
假如瀏覽器的寬度為200px道偷,那么1vw就等于2px(200px/100)
vh是相對視口(viewport)的高度而定的,長度等于視口高度的1/100
假如瀏覽器的高度為500px记劈,那么1vh就等于5px(500px/100)
vmin和vmax是相對于視口的高度和寬度兩者之間的最小值或最大值

/*
如果瀏覽器的高為300px勺鸦、寬為500px,那么1vmin就是3px目木,1vmax就是5px换途;如果瀏覽器的高為800px,寬為1080px,那么1vmin也是8px军拟,1vmax也是10.8px
*/

其他單位:
%(百分比)
一般來說就是相對于父元素
1剃执、對于普通定位元素就是我們理解的父元素
2、對于position: absolute;的元素是相對于已定位的父元素
3吻谋、對于position: fixed;的元素是相對于ViewPort(可視窗口)

vm

css3新單位忠蝗,相對于視口的寬度或高度中較小的那個
其中最小的那個被均分為100單位的vm
比如:瀏覽器高度900px,寬度1200px漓拾,取最小的瀏覽器高度阁最,1 vm = 900px/100 = 9 px
缺點:兼容性差

1、假如使用em來設(shè)置文字大小要注意什么骇两?
注意父元素的字體大小速种,因為em是根據(jù)父元素的大小來設(shè)置的。
比如同樣是1.5em低千,要是父元素是20配阵,那1.5em就是30px.要是父元素是30px,1.5em就是45px(特別是在多重div嵌套里面更要注意)
2、pc pt ch一般用在什么場景示血?
這些我們網(wǎng)頁設(shè)計基本上用不到棋傍,在排版上會有用處
3、如何使 1rem=10px
在設(shè)置HTML{font-size:62.5%难审;}即可
4瘫拣、如果父元素沒有指定高度,那么子元素的百分比的高度是多少告喊?
會按照子元素的實際高度麸拄,設(shè)置百分比則沒有效果

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市黔姜,隨后出現(xiàn)的幾起案子拢切,更是在濱河造成了極大的恐慌,老刑警劉巖秆吵,帶你破解...
    沈念sama閱讀 216,372評論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件淮椰,死亡現(xiàn)場離奇詭異,居然都是意外死亡纳寂,警方通過查閱死者的電腦和手機(jī)实苞,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來烈疚,“玉大人,你說我怎么就攤上這事聪轿∫危” “怎么了?”我有些...
    開封第一講書人閱讀 162,415評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長灯抛。 經(jīng)常有香客問我金赦,道長,這世上最難降的妖魔是什么对嚼? 我笑而不...
    開封第一講書人閱讀 58,157評論 1 292
  • 正文 為了忘掉前任夹抗,我火速辦了婚禮,結(jié)果婚禮上纵竖,老公的妹妹穿的比我還像新娘漠烧。我一直安慰自己,他們只是感情好靡砌,可當(dāng)我...
    茶點故事閱讀 67,171評論 6 388
  • 文/花漫 我一把揭開白布已脓。 她就那樣靜靜地躺著,像睡著了一般通殃。 火紅的嫁衣襯著肌膚如雪度液。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,125評論 1 297
  • 那天画舌,我揣著相機(jī)與錄音堕担,去河邊找鬼。 笑死曲聂,一個胖子當(dāng)著我的面吹牛霹购,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播句葵,決...
    沈念sama閱讀 40,028評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼厕鹃,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了乍丈?” 一聲冷哼從身側(cè)響起剂碴,我...
    開封第一講書人閱讀 38,887評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎轻专,沒想到半個月后忆矛,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,310評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡请垛,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,533評論 2 332
  • 正文 我和宋清朗相戀三年催训,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片宗收。...
    茶點故事閱讀 39,690評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡漫拭,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出混稽,到底是詐尸還是另有隱情采驻,我是刑警寧澤审胚,帶...
    沈念sama閱讀 35,411評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站礼旅,受9級特大地震影響膳叨,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜痘系,卻給世界環(huán)境...
    茶點故事閱讀 41,004評論 3 325
  • 文/蒙蒙 一菲嘴、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧汰翠,春花似錦龄坪、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至苟穆,卻和暖如春抄课,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背雳旅。 一陣腳步聲響...
    開封第一講書人閱讀 32,812評論 1 268
  • 我被黑心中介騙來泰國打工跟磨, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人攒盈。 一個月前我還...
    沈念sama閱讀 47,693評論 2 368
  • 正文 我出身青樓抵拘,卻偏偏與公主長得像,于是被迫代替她去往敵國和親型豁。 傳聞我的和親對象是個殘疾皇子僵蛛,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,577評論 2 353

推薦閱讀更多精彩內(nèi)容