【移動(dòng)應(yīng)用開發(fā)技術(shù)】px,em,rem,vh,vw,vmin,vmax的區(qū)別_第1頁
【移動(dòng)應(yīng)用開發(fā)技術(shù)】px,em,rem,vh,vw,vmin,vmax的區(qū)別_第2頁
【移動(dòng)應(yīng)用開發(fā)技術(shù)】px,em,rem,vh,vw,vmin,vmax的區(qū)別_第3頁
【移動(dòng)應(yīng)用開發(fā)技術(shù)】px,em,rem,vh,vw,vmin,vmax的區(qū)別_第4頁
【移動(dòng)應(yīng)用開發(fā)技術(shù)】px,em,rem,vh,vw,vmin,vmax的區(qū)別_第5頁
已閱讀5頁，還剩4頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

【移動(dòng)應(yīng)用開發(fā)技術(shù)】px,em,rem,vh,vw,vmin,vmax的區(qū)別

css手冊(cè)中關(guān)于font-size是這么介紹的：font-size值可以是絕對(duì)或相對(duì)值。絕對(duì)值：將文本設(shè)置為指定的大小不允許用戶在所有瀏覽器中改變文本大?。ú焕诳捎眯裕┙^對(duì)大小在確定了輸出的物理尺寸時(shí)很有用相對(duì)大?。合鄬?duì)于周圍的元素來設(shè)置大小允許用戶在瀏覽器改變文本大小注意：如果您沒有規(guī)定字體大小，普通文本（比如段落）的默認(rèn)大小是16像素

(16px=1em)。1、px：為像素單位。它是顯示屏上顯示的每一個(gè)小點(diǎn)，為顯示的最小單位。它是一個(gè)絕對(duì)尺寸單位；2、em：相對(duì)值，非固定大小單位1em等于當(dāng)前的字體尺寸。如果一個(gè)元素的font-size為16像素，那么對(duì)于該元素，1em就等于16像素。在設(shè)置字體大小時(shí)，em

的值會(huì)相對(duì)于父元素的字體大小改變。瀏覽器中默認(rèn)的文本大小是16像素。因此1em的默認(rèn)尺寸是16像素?？梢允褂孟旅孢@個(gè)公式將像素轉(zhuǎn)換為em：pixels/16=em

（注：16等于父元素的默認(rèn)字體大小，假設(shè)父元素的font-size為

20px，那么公式需改為：pixels/20=em）看一小段例子：<!DOCTYPE

html>

<html>

<head

lang="en">

<meta

charset="UTF-8">

<title>px,em,rem,vh,vw,vmin,vmax的區(qū)別</title>

<style>

div{font-size:1.5em;}

</style>

</head>

<body>

<div

class="id1">div1

<div

class="id2">div2

<div

class="id3">div3</div>

</div>

</div>

</body>

</html>頁面效果截圖：字體大小同樣都是1.5em，但是效果卻截然不同，按照W3C提供的公式，我們可以計(jì)算下：body繼承瀏覽器默認(rèn)字體大小：16pxclass為id1的div字體大小繼承自父元素body：16px*1.5em=24pxclass為id2的div字體大小繼承自父元素id1：24px*1.5em=36pxclass為id3的div字體大小繼承自父元素id2：36px*1.5em=54px這種轉(zhuǎn)換說白了其實(shí)就是兒子的字體大小除以父親的字體大小就得到了對(duì)應(yīng)的em值，這里有一個(gè)網(wǎng)站可以專門自動(dòng)轉(zhuǎn)換px，em，%，pt，要是真的看到數(shù)字就頭疼的話，可以點(diǎn)擊鏈接進(jìn)入網(wǎng)站自動(dòng)轉(zhuǎn)換：/在Firefox,Chrome,andSafari中，可以重新調(diào)整用px作為單位的字體大小，但是在InternetExplorer

中不行。雖然可以通過瀏覽器的縮放工具調(diào)整文本大小，但是這實(shí)際上是對(duì)整個(gè)頁面的調(diào)整，而不僅限于文本。W3C推薦使用em尺寸單位3、rem：W3C官網(wǎng)是這樣描述的“fontsizeoftherootelement”，rootelement就是指的根元素html前面說到的em是相對(duì)于其父元素來設(shè)置字體大小的，這樣就會(huì)存在一個(gè)問題，進(jìn)行任何元素設(shè)置，都必須知道父元素的字體大小，在多次使用中往往會(huì)給我們帶來無法預(yù)知的錯(cuò)誤風(fēng)險(xiǎn)。而rem是相對(duì)于根元素html我們把上面的例子稍加修改：<!DOCTYPE

html>

<html>

<head

lang="en">

<meta

charset="UTF-8">

<title>px,em,rem,vh,vw,vmin,vmax的區(qū)別</title>

<style>

div{font-size:1.5rem;}

.id3{font-size:1.5em;}

</style>

</head>

<body>

<div

class="id1">div1

<div

class="id2">div2

<div

class="id3">div3</div>

</div>

</div>

</body>

</html>再對(duì)比下頁面效果div1和div2的字體大?。豪^承自瀏覽器默認(rèn)字體大小16px*1.5rem=24pxdiv3的字體大?。豪^承自父元素div2的字體大小24px*1.5em=36px瀏覽器的兼容性問題：rem是CSS3新引進(jìn)來的一個(gè)度量單位，支持MozillaFirefox3.6+、AppleSafari5+、GoogleChrome、IE9+和Opera11+，IE8及以下版本均不支持4、%百分比，相對(duì)長度單位，相對(duì)于父元素的百分比值需要注意的是：em是相對(duì)于應(yīng)用于當(dāng)前當(dāng)前元素的字體尺寸；而百分比則是相對(duì)于父元素的尺寸。如下面示例<!DOCTYPE

html>

<html>

<head

lang="en">

<meta

charset="UTF-8">

<title></title>

<style>

div{margin:10px;

background:#f0f;}

.parent{width:200px;

font-size:18px;}

.em-demo{width:5em;

background:#eae;}

.percentage-demo{width:80%;

background:#2f6;}

</style>

</head>

<body>

<div

class="parent">

<div

class="em-demo">

設(shè)置長度為5em

demo

</div>

<div

class="percentage-demo">

設(shè)置長度為80%

demo

</div>

</div>

<div

id="id"></div>

</body>

</html>查看下頁面效果截圖可以看到，以em為單位的div寬度為90px：18px*5em，以%為單位的div寬度為160px：200px*0.8對(duì)于px、em和百分比都能設(shè)置元素的尺寸和字體大小，但是它們各自有自己所不同的應(yīng)用場景。不合理的運(yùn)用，則會(huì)導(dǎo)致頁面的混亂、難易維護(hù)和擴(kuò)展。對(duì)于它們的使用，有如下幾點(diǎn)被大家所認(rèn)同的最佳實(shí)踐：4.1、盡量使用相對(duì)尺寸單位使用相對(duì)尺寸單位計(jì)量，則在調(diào)整頁面的布局的時(shí)候，不需要遍歷所有的內(nèi)部DOM結(jié)構(gòu)，重新設(shè)置內(nèi)部子元素的尺寸大小，同時(shí)它也能更好的適應(yīng)與多中分辨率和屏幕終端。采用相對(duì)定位，并不意味著頁面整體的自適應(yīng)。當(dāng)然，對(duì)于希望整體網(wǎng)站的“響應(yīng)式設(shè)計(jì)”，適應(yīng)當(dāng)今層出不窮的的各類訪問終端，相對(duì)尺寸布局將發(fā)揮更大的價(jià)值。我們僅需要利用CSS3的@media查詢來設(shè)置外圍的整體寬度，以及少量在設(shè)備上不一致的用戶體驗(yàn)。關(guān)于“響應(yīng)式布局”，可以更多的參考bootstrap這類新興的CSS框架。對(duì)于相對(duì)尺寸單位的設(shè)置：em和%因?yàn)樗鼈兿鄬?duì)的參考物不同，所以它們也有不同的使用場景。如果希望隨著當(dāng)前元素的字體尺寸而改變尺寸，則使用em最佳，如：行高、字體大小。相反，如果是隨著父容器或者是整體頁面布局而改變尺寸，則使用%更好，如元素的高度和寬度設(shè)置。4.2、只在可預(yù)知的元素上使用絕對(duì)尺寸并不是所有的元素設(shè)置相對(duì)尺寸就是最佳的。對(duì)于如圖表icon、如video這類多媒體元素、網(wǎng)頁整體的寬度這類可預(yù)知尺寸，設(shè)置為絕對(duì)路徑可能反而是最佳的選擇。但他們需要試具體場景而定，從而獲得最佳體驗(yàn)。不管我們?nèi)绱嗽O(shè)置相對(duì)尺寸，但在外層也總會(huì)有一些絕對(duì)尺寸度量，才可能存在百分比這類相對(duì)尺寸設(shè)置。4.3、字體尺寸盡量使用em、rem和盡量使用相對(duì)尺寸單位一樣，為了字體大小的可維護(hù)性和伸縮性，W3C更推薦使用em作為字體尺寸單位。需要注意的是，如果存在3層以及3層以上的字體相對(duì)尺寸的設(shè)置，則對(duì)于實(shí)際字體大小的計(jì)算，就會(huì)變得相對(duì)麻煩。這個(gè)時(shí)候，在滿足瀏覽器兼容性的情況下，可以考慮使用CSS3的新特性rem：根據(jù)固定根元素的字體大小來設(shè)置相對(duì)尺寸大小，這也是近幾年移動(dòng)APP所興起的使用方式。rem的兼容性，我們可以用CanIUse網(wǎng)站獲取。/4.4、@media查詢做平臺(tái)適配，但禁止隨處濫用如上所說CSS3的@media查詢，能幫助我們做到多平臺(tái)終端的自適應(yīng)布局，得到一個(gè)更好的用戶體驗(yàn)。但這絕不意味著我們可以隨處濫用它，在CSS代碼中存在太多的平臺(tái)差異的代碼，這也會(huì)增加代碼可讀性、維護(hù)性的難度。更好的方式則是僅在必須使用它的場景下，合理的使用它，如頁面外圍的整體寬度，不同顯示的菜單欄等。更多的體驗(yàn)適應(yīng)性，可以移動(dòng)到使用“流式布局”來實(shí)現(xiàn)。關(guān)于響應(yīng)式設(shè)計(jì)，這是對(duì)開發(fā)周期、成本和平臺(tái)體驗(yàn)的一個(gè)權(quán)衡的結(jié)果。如果不考慮開發(fā)、維護(hù)的成本，則為不同平臺(tái)終端提供不同的頁面設(shè)計(jì)，這樣得到的用戶體驗(yàn)會(huì)更友好。但在實(shí)際開發(fā)中，開發(fā)和維護(hù)成本、產(chǎn)品生命周期也是一個(gè)重要的權(quán)衡標(biāo)準(zhǔn)，而響應(yīng)式設(shè)計(jì)則是它們之間的權(quán)衡結(jié)果。5、vh和vw，vmin和vmax

vh和vw相對(duì)于視口的高度和寬度，而不是父元素的（CSS百分比是相對(duì)于包含它的最近的父元素的高度和寬度）1vh等于1/100的視口高度，1vw等于1/100的視口寬度比如：瀏覽器高度900px，寬度為750px,1vh=900px/100=9px，1vw=750px/100=7.5px。很容易實(shí)現(xiàn)與同屏幕等高的框：CSS代碼：.slide

{height:

100vh;}設(shè)置一個(gè)和屏幕同寬的標(biāo)題，h2{font-size:100vw}，那標(biāo)題的字體大小就會(huì)自動(dòng)根據(jù)瀏覽器的寬度進(jìn)行縮放，以達(dá)到字體和viewport大小同步的效果。vminandvmax：關(guān)于視口高度和寬度兩者的最小值或者最大值。比如，瀏覽器的寬度設(shè)置為1200px，高度設(shè)置為800px，1vmax=1200/100px=12px，1vmin=800/100px=8px。如果寬度設(shè)置為600px,高度設(shè)置為1080px,1vmin就等于6px,1vmax則等于10.8px。有一個(gè)元素，你需要讓它始終在屏幕上可見：HTML代碼：<!DOCTYPE

html>

<html>

<head

lang="en">

<meta

charset="UTF-8">

<meta

name="viewport"

content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

<title></title>

<style>

*{margin:0;

padding:0;}

.box

{

height:

100vmin;

width:

100vmin;

background:#f00;/*為了讓用戶看到*/

}

</style>

</head>

<body>

<div

class="box"></div>

</body>

</html>頁面截圖，紅色區(qū)域會(huì)隨著瀏覽器窗口的大小改變而改變?nèi)绻屵@個(gè)元素始終鋪滿整個(gè)視口的可視區(qū)域，只需要把上面的vmin改成vmax即可CSS代碼：*{margin:0;

padding:0;}

.box

{

height:

100vmax;

width:

100vmax;

background:#f00;/*為了讓用戶看到*/

}頁面截圖，紅色區(qū)域在任意手機(jī)機(jī)型模擬器下都會(huì)鋪滿整個(gè)屏幕vw,vh,vmin,vmax：IE9+局部支持，chrome/firefox/safari/opera支持，iOS

safari8+支持，Androidbrowser4.4+支持，chromeforandroid39支持其它的單位還有：%:百分比in:寸cm:厘米mm:毫米pt:point，大約1/72寸pc:pica，大約6pt，1/6寸6、ex：取當(dāng)前作用效果的字體的x的高度，在無法確定x高度的情況下以0.5em計(jì)算(IE11及以下均不支持，firefox/chrome/safari/opera/iossafari/andr

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論