最全的CSS尺寸單位介紹
在這之前,需要先對幾個概念進行普及介紹
基本概念
(以下概念讀起來可能有些晦澀,如果看不懂也沒關系)
像素
它不是自然界的物理長度,指基本原色素及其灰度的基本編碼。
css中的像素只是一個抽象的單位,在不同的設備或不同的環境中,css中的1px所代表的設備物理像素是不同的。?
在為桌面瀏覽器設計的網頁中,我們無需對這個津津計較,但在移動設備上,必須弄明白這點。?
在早先的移動設備中,屏幕像素密度都比較低,如iphone3,它的分辨率為320x480,在iphone3上,一個css像素確實是等於一個屏幕物理像素的。?
物理像素
它是顯示器(電腦、手機屏幕)最小的物理顯示單位,物理像素指的是顯示器上最小的點。物理像素的大小取決於屏幕。是一個無法改變的屬性。
設備獨立像素
我上一張圖,你就會理解什麽是設備獨立像素
就是我們開發過程中使用的css中的px
設備像素比(device pixel radio)
設備像素比 = 物理像素 / 設備獨立像素,單位是dpr!(device pixel radio)
Retina屏幕
所謂“Retina”是一種顯示標準,是把更多的像素點壓縮至一塊屏幕裏,從而達到更高的分辨率並提高屏幕顯示的細膩程度。也被稱為視網膜顯示屏 ——百度百科
因為Retina屏幕的出現,在pc端默認情況下,css中的1px等於1物理像素,但在移動端1px不一定等於1物理像素,比如說iPhone的設備獨立像素是375?667,因為它使用了Retina屏幕,他的dpr是2,所以iPhone 6 的物理像素為 750?1334
在不同的屏幕上(普通屏幕 vs retina屏幕),css中1px所呈現的大小(物理尺寸)是一致的,不同的是1px所對應的物理像素個數是不一致的。
在普通屏幕下,1px 對應 1個物理像素(1:1)。 在Retina屏幕下(dpr=2),1px對應 2x2個物理像素(1:4)。
你會發現,在移動端開發中使用了圖片(img標簽),2倍圖要比1倍圖清晰,就是這個緣故
px
默認情況下像素px是相對於屏幕分辨率而言,比如說我們的屏幕分辨率是1440 X 900,說的就是像素1440px X 900px;
這裏會遇到另一種情況
瀏覽器縮放
縮放是縮放CSS像素(縮放比例為1時,一個CSS像素等於一個屏幕像素),就是在屏幕分辨率不變的情況下,用戶對瀏覽進行了縮放
強調一點,用戶的縮放行為是對瀏覽器進行的,縮放的是css像素,而非分辨率,分辨率是屏幕的分辨率,不論你怎麽縮放當前頁面,屏幕分辨率都不會改變
我們知道在移動端可以在一定程度上控制用戶的縮放行為,也可以禁止用戶縮放
<meta?name="viewport"?content="width=device-width,initial-scale=1.0">
content屬性值 :
- width:可視區域的寬度,值可為數字或關鍵詞device-width
- height:可視區域的高度,值可為數字或關鍵詞device-height
- intial-scale:頁面首次被顯示是可視區域的縮放級別,取值1.0則頁面按實際尺寸顯示,無任何縮放
- maximum-scale=1.0, minimum-scale=1.0;可視區域的縮放級別,
- maximum-scale用戶可將頁面放大的程序,1.0將禁止用戶放大到實際尺寸之上。
- user-scalable:是否可對頁面進行縮放,no 禁止縮放
但是在pc端就麻煩了
windows:
- ctrl + +/-
- ctrl + 滾輪
- 瀏覽器菜單欄
mac:
- cammond + +/-
- 瀏覽器菜單欄
由於瀏覽器菜單欄屬於系統軟件權限,沒發控制,我們可以通過js控制ctrl/cammond + +/- 或 Windows下ctrl + 滾輪 縮放頁面的情況
em
本人在實際開發過程中並沒有使用過em單位,但是後面要說的rem是基於em的,所以,對em進行簡單介紹
em 是相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置,則相對於瀏覽器的默認字體尺寸。
- em的值並不是固定的;
- em會繼承父級元素的字體大小;
- 任意瀏覽器的默認字體高都是16px。所有未經調整的瀏覽器都符合: 1em=16px。body選擇器中聲明Font-size=62.5%<==>1em=10px。
看個栗子吧
<body>
<style>
html {
font-size: 50px;
}
.my-div {
width: 100%;
height: 500px;
margin-top: 50px;
background-color: gray;
font-size: 40px;
}
.my-div .parent-font {
font-size: 30px;
}
.my-div .parent-font .child-font {
font-size: 0.5em;
}
</style>
<div class="my-div">
<p class="parent-font">
我是父級文字
<span class="child-font">我是子級文字</span>
</p>
</div>
</body>
html代碼中,
第一級,html的 font-size: 50px;
第二級,my-div 的 font-size: 40px;
第三級,parent-font 的 font-size:30px;
第四級,child-font 的 font-size: 0.5em;
我們通過瀏覽器查看,發現第四級的fong-size為15px;
我們取消第三級parent-font 的字體大小
我們通過瀏覽器查看,發現第四級的fong-size為20px;
當我們取消第三級font-size後,第三級的字體大小為40px;
所以我們說em的字體大小不是固定的,em的大小取決於父級的字體大小
當父級的字體大小為20px,子級的1em就是20px
當父級的字體大小為30px,子級的1em就是30px
那麽說font-size存在著繼承父級的特點
我們在第一級html中設置font-size,第二級繼承第一級,第三級繼承第二級,第四級繼承第三級,以此類推
每一級都繼承自它的父級,也就是說每一級的em所代表的px大小都不是固定的,因為他們的父級不是同一個,所以em的應用場景並不多。
那麽如果是em的都繼承自同一個地方,是不是可以解決很多問題呢?
這時候rem出現了
rem
rem 是CSS3的一個相對單位(root em,根em)
使用rem為元素設定字體大小時,仍然是相對大小,但相對的只是HTML根元素
只要html的font-size大小不變,1rem所代表的font-size大小就不會變,rem只取決於html的font-size
rem解決了哪些問題
移動設備的寬度是各種各樣的,每個設備的dpr也不同,換句話說就是不同設備每一行的物理像素數不同,能顯示的css的px數也不同,
如果我們寫一個div,寬度是375px,375px在這個屏幕(iPhone6)上是剛剛滿屏,因為這個屏幕寬度剛剛是375px( 設備獨立像素),
當我們換另一個寬度是414px的設備(iPhone6Plus)時,這個寬度375px的div就無法鋪滿這個屏幕,同樣的當換一個iPhone5(320px),又會出現滾動條,安卓機的寬度更是五花八門,使用media媒體查詢不靠譜,因為它不能覆蓋所有的機型寬度
我們之前說rem的大小是相對於html的font-size的,如果html的font-size根據不同設備的寬度做動態計算,問題就會得到解決
我們寫頁面都是根據UI設計稿來做的,我們假設UI設計稿的寬度是750px(750px是常規寬度,當然也可以是640px或是其他寬度,但是整個項目,寬度必須統一),唯一不變就是就屏幕寬度,我們的html的font-size(rem)只取決於設備寬度
於是
document.documentElement.style.fontSize =?100?* (?document.documentElement.clientWidth /?750) +?‘px‘
html的font-size:document.documentElement.style.fontSize
設備的寬度:document.documentElement.clientWidth
750:UI設計稿的寬度
為了方便計算我們將font-size x 100,方便計算(乘100不是必須的,我接觸過一些項目就不是乘以100,但是UI設計稿中使用了sketch做了動態計算,但我還是建議乘100,不然遇到psd的設計圖就很麻煩了)
對上面的js做些完善
const fontFun = function () {
let docEl = document.documentElement
let resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘
const recalc = function () {
let clientWidth = docEl.clientWidth
if (!clientWidth) return
docEl.style.fontSize = 100 * (clientWidth / 750) + ‘px‘
}
if (!document.addEventListener) return
window.addEventListener(resizeEvt, recalc, false)
window.addEventListener(‘pageshow‘, recalc, false)
document.addEventListener(‘DOMContentLoaded‘, recalc, false)
}
export {
fontFun
}
對以上代碼不做過多解釋
也可以這樣寫
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘,
recalc = function() {
var clientWidth = docEl.clientWidth
if (!clientWidth) return
docEl.style.fontSize = 100 * (clientWidth / 750) + ‘px‘
}
if (!doc.addEventListener) return
win.addEventListener(resizeEvt, recalc, false)
win.addEventListener(‘pageshow‘, recalc, false)
doc.addEventListener(‘DOMContentLoaded‘, recalc, false)
})(document, window)
iPhone5(320px)下html的font-size:42.6667px,1rem=42.6667px
iPhone6(375px)下html的font-size:50px,1rem=50px
iPhone6Plus(414px)下html的font-size:55.2px,1rem=55.2px
rem是繼承自html的font-size,但是小程序中沒有html,那怎麽辦呢?
rpx
我不基於html的font-size了,我基於一個別的值就行了,你也不需要計算這個值,我給你計算了,這就是rpx。
最終的效果就是,你開發時在iphon6的設計稿上量了多少px,就寫多少rpx就行了,完美適配,perfect!
自己是從事了五年的前端工程師
這裏推薦一下我的前端學習交流qun:784783012,裏面都是學習前端的從最基礎的HTML+CSS+JS【炫酷特效,遊戲,插件封裝,設計模式】到移動端HTML5的項目實戰的學習資料都有整理,送給每一位前端小夥伴。最新技術,與企業需求同步。好友都在裏面學習交流,每天都會有大牛定時講解前端技術!
點擊:加入
最全的CSS尺寸單位介紹