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

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

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

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

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

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

（注：16等于父元素的默認字體大小，假設父元素的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這種轉換說白了其實就是兒子的字體大小除以父親的字體大小就得到了對應的em值，這里有一個網站可以專門自動轉換px，em，%，pt，要是真的看到數(shù)字就頭疼的話，可以點擊鏈接進入網站自動轉換：/在Firefox,Chrome,andSafari中，可以重新調整用px作為單位的字體大小，但是在InternetExplorer

中不行。雖然可以通過瀏覽器的縮放工具調整文本大小，但是這實際上是對整個頁面的調整，而不僅限于文本。W3C推薦使用em尺寸單位3、rem：W3C官網是這樣描述的“fontsizeoftherootelement”，rootelement就是指的根元素html前面說到的em是相對于其父元素來設置字體大小的，這樣就會存在一個問題，進行任何元素設置，都必須知道父元素的字體大小，在多次使用中往往會給我們帶來無法預知的錯誤風險。而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是相對于應用于當前當前元素的字體尺寸；而百分比則是相對于父元素的尺寸。如下面示例<!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">

設置長度為5em

demo

</div>

<div

class="percentage-demo">

設置長度為80%

demo

</div>

</div>

<div

id="id"></div>

</body>

</html>查看下頁面效果截圖可以看到，以em為單位的div寬度為90px：18px*5em，以%為單位的div寬度為160px：200px*0.8對于px、em和百分比都能設置元素的尺寸和字體大小，但是它們各自有自己所不同的應用場景。不合理的運用，則會導致頁面的混亂、難易維護和擴展。對于它們的使用，有如下幾點被大家所認同的最佳實踐：4.1、盡量使用相對尺寸單位使用相對尺寸單位計量，則在調整頁面的布局的時候，不需要遍歷所有的內部DOM結構，重新設置內部子元素的尺寸大小，同時它也能更好的適應與多中分辨率和屏幕終端。采用相對定位，并不意味著頁面整體的自適應。當然，對于希望整體網站的“響應式設計”，適應當今層出不窮的的各類訪問終端，相對尺寸布局將發(fā)揮更大的價值。我們僅需要利用CSS3的@media查詢來設置外圍的整體寬度，以及少量在設備上不一致的用戶體驗。關于“響應式布局”，可以更多的參考bootstrap這類新興的CSS框架。對于相對尺寸單位的設置：em和%因為它們相對的參考物不同，所以它們也有不同的使用場景。如果希望隨著當前元素的字體尺寸而改變尺寸，則使用em最佳，如：行高、字體大小。相反，如果是隨著父容器或者是整體頁面布局而改變尺寸，則使用%更好，如元素的高度和寬度設置。4.2、只在可預知的元素上使用絕對尺寸并不是所有的元素設置相對尺寸就是最佳的。對于如圖表icon、如video這類多媒體元素、網頁整體的寬度這類可預知尺寸，設置為絕對路徑可能反而是最佳的選擇。但他們需要試具體場景而定，從而獲得最佳體驗。不管我們如此設置相對尺寸，但在外層也總會有一些絕對尺寸度量，才可能存在百分比這類相對尺寸設置。4.3、字體尺寸盡量使用em、rem和盡量使用相對尺寸單位一樣，為了字體大小的可維護性和伸縮性，W3C更推薦使用em作為字體尺寸單位。需要注意的是，如果存在3層以及3層以上的字體相對尺寸的設置，則對于實際字體大小的計算，就會變得相對麻煩。這個時候，在滿足瀏覽器兼容性的情況下，可以考慮使用CSS3的新特性rem：根據(jù)固定根元素的字體大小來設置相對尺寸大小，這也是近幾年移動APP所興起的使用方式。rem的兼容性，我們可以用CanIUse網站獲取。/4.4、@media查詢做平臺適配，但禁止隨處濫用如上所說CSS3的@media查詢，能幫助我們做到多平臺終端的自適應布局，得到一個更好的用戶體驗。但這絕不意味著我們可以隨處濫用它，在CSS代碼中存在太多的平臺差異的代碼，這也會增加代碼可讀性、維護性的難度。更好的方式則是僅在必須使用它的場景下，合理的使用它，如頁面外圍的整體寬度，不同顯示的菜單欄等。更多的體驗適應性，可以移動到使用“流式布局”來實現(xiàn)。關于響應式設計，這是對開發(fā)周期、成本和平臺體驗的一個權衡的結果。如果不考慮開發(fā)、維護的成本，則為不同平臺終端提供不同的頁面設計，這樣得到的用戶體驗會更友好。但在實際開發(fā)中，開發(fā)和維護成本、產品生命周期也是一個重要的權衡標準，而響應式設計則是它們之間的權衡結果。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;}設置一個和屏幕同寬的標題，h2{font-size:100vw}，那標題的字體大小就會自動根據(jù)瀏覽器的寬度進行縮放，以達到字體和viewport大小同步的效果。vminandvmax：關于視口高度和寬度兩者的最小值或者最大值。比如，瀏覽器的寬度設置為1200px，高度設置為800px，1vmax=1200/100px=12px，1vmin=800/100px=8px。如果寬度設置為600px,高度設置為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ū)域會隨著瀏覽器窗口的大小改變而改變如果要讓這個元素始終鋪滿整個視口的可視區(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：取當前作用效果的字體的x的高度，在無法確定x高度的情況下以0.5em計算(IE11及以下均不支持，firefox/chrome/safari/opera/iossafari/andr

溫馨提示

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

評論

0/150

提交評論