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

下載本文檔

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

文檔簡介

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

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

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

的值會相對于父元素的字體大小改變。瀏覽器中默認的文本大小是16像素。因此1em的默認尺寸是16像素。可以使用下面這個公式將像素轉(zhuǎn)換為em：pixels/16=em

（注：16等于父元素的默認字體大小，假設(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提供的公式，我們可以計算下：body繼承瀏覽器默認字體大小：16pxclass為id1的div字體大小繼承自父元素body：16px*1.5em=24pxclass為id2的div字體大小繼承自父元素id1：24px*1.5em=36pxclass為id3的div字體大小繼承自父元素id2：36px*1.5em=54px這種轉(zhuǎn)換說白了其實就是兒子的字體大小除以父親的字體大小就得到了對應(yīng)的em值，這里有一個網(wǎng)站可以專門自動轉(zhuǎn)換px，em，%，pt，要是真的看到數(shù)字就頭疼的話，可以點擊鏈接進入網(wǎng)站自動轉(zhuǎn)換：/在Firefox,Chrome,andSafari中，可以重新調(diào)整用px作為單位的字體大小，但是在InternetExplorer

中不行。雖然可以通過瀏覽器的縮放工具調(diào)整文本大小，但是這實際上是對整個頁面的調(diào)整，而不僅限于文本。W3C推薦使用em尺寸單位3、rem：W3C官網(wǎng)是這樣描述的“fontsizeoftherootelement”，rootelement就是指的根元素html前面說到的em是相對于其父元素來設(shè)置字體大小的，這樣就會存在一個問題，進行任何元素設(shè)置，都必須知道父元素的字體大小，在多次使用中往往會給我們帶來無法預(yù)知的錯誤風(fēng)險。而rem是相對于根元素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>再對比下頁面效果div1和div2的字體大?。豪^承自瀏覽器默認字體大小16px*1.5rem=24pxdiv3的字體大小：繼承自父元素div2的字體大小24px*1.5em=36px瀏覽器的兼容性問題：rem是CSS3新引進來的一個度量單位，支持MozillaFirefox3.6+、AppleSafari5+、GoogleChrome、IE9+和Opera11+，IE8及以下版本均不支持4、%百分比，相對長度單位，相對于父元素的百分比值需要注意的是：em是相對于應(yīng)用于當(dāng)前當(dāng)前元素的字體尺寸；而百分比則是相對于父元素的尺寸。如下面示例<!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對于px、em和百分比都能設(shè)置元素的尺寸和字體大小，但是它們各自有自己所不同的應(yīng)用場景。不合理的運用，則會導(dǎo)致頁面的混亂、難易維護和擴展。對于它們的使用，有如下幾點被大家所認同的最佳實踐：4.1、盡量使用相對尺寸單位使用相對尺寸單位計量，則在調(diào)整頁面的布局的時候，不需要遍歷所有的內(nèi)部DOM結(jié)構(gòu)，重新設(shè)置內(nèi)部子元素的尺寸大小，同時它也能更好的適應(yīng)與多中分辨率和屏幕終端。采用相對定位，并不意味著頁面整體的自適應(yīng)。當(dāng)然，對于希望整體網(wǎng)站的“響應(yīng)式設(shè)計”，適應(yīng)當(dāng)今層出不窮的的各類訪問終端，相對尺寸布局將發(fā)揮更大的價值。我們僅需要利用CSS3的@media查詢來設(shè)置外圍的整體寬度，以及少量在設(shè)備上不一致的用戶體驗。關(guān)于“響應(yīng)式布局”，可以更多的參考bootstrap這類新興的CSS框架。對于相對尺寸單位的設(shè)置：em和%因為它們相對的參考物不同，所以它們也有不同的使用場景。如果希望隨著當(dāng)前元素的字體尺寸而改變尺寸，則使用em最佳，如：行高、字體大小。相反，如果是隨著父容器或者是整體頁面布局而改變尺寸，則使用%更好，如元素的高度和寬度設(shè)置。4.2、只在可預(yù)知的元素上使用絕對尺寸并不是所有的元素設(shè)置相對尺寸就是最佳的。對于如圖表icon、如video這類多媒體元素、網(wǎng)頁整體的寬度這類可預(yù)知尺寸，設(shè)置為絕對路徑可能反而是最佳的選擇。但他們需要試具體場景而定，從而獲得最佳體驗。不管我們?nèi)绱嗽O(shè)置相對尺寸，但在外層也總會有一些絕對尺寸度量，才可能存在百分比這類相對尺寸設(shè)置。4.3、字體尺寸盡量使用em、rem和盡量使用相對尺寸單位一樣，為了字體大小的可維護性和伸縮性，W3C更推薦使用em作為字體尺寸單位。需要注意的是，如果存在3層以及3層以上的字體相對尺寸的設(shè)置，則對于實際字體大小的計算，就會變得相對麻煩。這個時候，在滿足瀏覽器兼容性的情況下，可以考慮使用CSS3的新特性rem：根據(jù)固定根元素的字體大小來設(shè)置相對尺寸大小，這也是近幾年移動APP所興起的使用方式。rem的兼容性，我們可以用CanIUse網(wǎng)站獲取。/4.4、@media查詢做平臺適配，但禁止隨處濫用如上所說CSS3的@media查詢，能幫助我們做到多平臺終端的自適應(yīng)布局，得到一個更好的用戶體驗。但這絕不意味著我們可以隨處濫用它，在CSS代碼中存在太多的平臺差異的代碼，這也會增加代碼可讀性、維護性的難度。更好的方式則是僅在必須使用它的場景下，合理的使用它，如頁面外圍的整體寬度，不同顯示的菜單欄等。更多的體驗適應(yīng)性，可以移動到使用“流式布局”來實現(xiàn)。關(guān)于響應(yīng)式設(shè)計，這是對開發(fā)周期、成本和平臺體驗的一個權(quán)衡的結(jié)果。如果不考慮開發(fā)、維護的成本，則為不同平臺終端提供不同的頁面設(shè)計，這樣得到的用戶體驗會更友好。但在實際開發(fā)中，開發(fā)和維護成本、產(chǎn)品生命周期也是一個重要的權(quán)衡標(biāo)準(zhǔn)，而響應(yīng)式設(shè)計則是它們之間的權(quán)衡結(jié)果。5、vh和vw，vmin和vmax

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

{height:

100vh;}設(shè)置一個和屏幕同寬的標(biāo)題，h2{font-size:100vw}，那標(biāo)題的字體大小就會自動根據(jù)瀏覽器的寬度進行縮放，以達到字體和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。有一個元素，你需要讓它始終在屏幕上可見：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ū)域會隨著瀏覽器窗口的大小改變而改變?nèi)绻屵@個元素始終鋪滿整個視口的可視區(qū)域，只需要把上面的vmin改成vmax即可CSS代碼：*{margin:0;

padding:0;}

.box

{

height:

100vmax;

width:

100vmax;

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

}頁面截圖，紅色區(qū)域在任意手機機型模擬器下都會鋪滿整個屏幕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計算(IE11及以下均不支持，firefox/chrome/safari/opera/iossafari/andr

溫馨提示

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

評論

0/150

提交評論