css 像素

時間 2019-11-09

標籤 css 像素欄目 CSS 简体版

原文原文鏈接

前言：

首先先看一張css的單位表：css

css提供表達長度的單位有不少種。當咱們在選擇使用這些單位時，須要去考慮，他們的輸出媒體是什麼，不一樣的輸出媒體，咱們須要使用不一樣的單位。html

目前咱們的輸出媒體主要有屏幕跟紙張(打印)。下面的圖片提供了一個推薦的用法：css3

1.cm,mm,in,pt,pc

在這麼多種單位中cm,mm,in,pt,pc屬於絕對單位，使用這些單位前提是輸出媒體的分辨率要足夠的高（好比鐳射打印機）。目前市場上屏幕分辨率有高有低，因此這些單位不是一個好的選擇。瀏覽器

絕對單位之間的關係爲：1in = 2.54cm = 25.4mm = 72pt = 6pciphone

2.ex

單位ex：必須與字體的x-height有關的大小（x-字高，指小寫字母的高度）。不多使用。佈局

x-字高維基百科的說明是：指字母的基本高度，精確地說，就是基線（英語：baseline）和主線之間的距離。特別的，它指稱一個字體中小寫字母x的高度，而實際上這也和字母a、c、e、m、n、o、r、s、u、v、w和z的高度是同樣的。

3.%

單位%:學習

line-height: 根據當前字體的值乘以百分比
padding,margin都是相對於父元素的*寬度*(border-box盒模型的話，就是元素內容的寬度)，
heigth是相對於父元素的*高度*爲基準，若父元素爲auto,則子元素也爲auto
width: 在正常文檔流，浮動設置中，都是父元素的內容寬度，有定位設置則是須要加上內邊距寬度
定位元素的top/right/bottom/left:top,bottom根據父元素的高度爲基準，left/right:根據父元素的寬度爲基準（都包含內邊距的寬度）

eg:
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .p1 {
            width: 200px;
            height: 300px;
            font-size: 16px;
            padding: 10px;
            margin: 10px;
            background-color: #222;
            color: #fff;
        }
        .s1 {
            width: 50%;
            height: 50%;
            font-size: 120%;
            line-height: 50%;
            padding: 50%;
            margin: 50%;
            background-color: #345;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="p1">
        <p>父親</p>
        <div class="s1">兒子</div>
    </div>
</body>
</html>

4.px

咱們在作移動頁面開發的時候常常會遇到在不一樣的手機上看，裏面的圖片、文字或者線的大小會不同。在iphone4之前,1px == 1個物理像素的寬度，可是從 iPhone4 開始，蘋果推出了視網膜屏幕，分辨率提升了一倍，而屏幕尺寸卻沒變，這時1px == 4個硬件上的像素點 (2 x 2)（是原來的2倍，後面iphone6s又出現了3倍）。出現不一樣手機文字大小不同的根本緣由是在於設備的像素比（PPI）不同。PPI的值越高，畫質越好，也就是越細膩，看起來更有逼格。因此咱們在移動頁面開發中使用px，沒法去適應各類屏幕。那麼什麼是PPI,咱們先理解幾個概念：物理像素，邏輯像素，渲染像素。字體

4.1 物理像素：

物理像素（設備像素）即實際的屏幕單元尺寸大小，咱們買手機的時候，能夠常常看到幾個關鍵詞就是：屏幕分辨率（如1920x1080像素），屏幕尺寸（如5.2英寸的屏幕），屏幕像素密度，那麼這些都是什麼？有什麼關係？能夠去看這篇文章，講的很仔細《（全解析）屏幕尺寸，分辨率，像素，PPI之間到底什麼關係？》spa

簡化版本：(文中拿華爲榮耀7做爲例子).net

1.屏幕分辨率：分辨率1920px * 1080px的意思就是，在5.2英寸屏幕上，在豎向的高度上有1920個像素塊，在橫向的寬度上有1080個像素塊。

2.屏幕尺寸：這個5.2英寸是手機屏幕對角線的長度，用勾股定理能夠直接算出來。

3.屏幕像素密度：每英寸屏幕所擁有的像素數，英文簡稱PPI，注意這個也是對角線的長度，即在一個對角線長度爲1英寸的正方形內所擁有的像素數

4.屏幕像素密度，分辨率，屏幕尺寸的關係能夠用一個公式來表示：

最後算出來的結果爲華爲榮耀7的ppi爲423.6359942465958約爲424

4.2 邏輯像素：

邏輯像素就是咱們常說的css像素單元。經過上述咱們能夠知道邏輯像素不等於物理像素。

4.3 渲染像素：

渲染像素：是系統基於邏輯像素進行對應倍增（1x、2x 或 3x）而得的結果。

咱們在開發移動頁面是須要考慮的是如何讓頁面在各個手機看起來都正常顯示，那麼咱們應該考慮的是渲染像素，可是若是咱們針對手機，一個個去匹配的話又不現實。因此這時候咱們就應該考慮em跟rem，來彈性適應各類大小。

5.em與rem

em與rem都是根據元素字體的大小的多少來適應的，

em

em是根據父元素的大小來適應的，能夠等比例縮放匹配全部屏幕
若是父元素爲16px, 那麼子元素1em == 16px。
舉個🌰：

eg:
<div class="p1">
    <p>p1</p>
    <div class="s1">s1
        <div class="s1-1">s1-1</div>
    </div>
</div>
<div class="p2">
    <p>p2</p>
    <div class="s5">s5</div>
    <div class="s6">s6</div>
</div>

.p1 {font-size: 16px;}
.s1 {font-size: 2em;} // 32px
.s1-1 {font-size: 0.5em}; // 16px

.p2 {font-size: 16px;}
.s5 {font-size: 4em;} // 64px
.s6 {
    font-size: 2em;  // 32px
    line-height: 2em; // 64px
}

可是使用em作彈性佈局的話有個缺點就是，一旦某個節點的字體發生變化，那麼其子元素都得從新計算。。。牽一髮而動全身。

rem

rem是css3新引入的一個單位，她是基於跟元素的大小來匹配。她的兼容性很不錯，若是你不須要匹配ie6-8,那麼你徹底能夠使用rem佈局

eg:
html{
    font-size: 16px;
}
1rem = 16px;

舉個🌰：

<div class="p1">
    <p>p1</p>
    <div class="s1">s1
        <div class="s1-1">s1-1</div>
    </div>
</div>
<div class="p2">
    <p>p2</p>
    <div class="s5">s5</div>
    <div class="s6">s6</div>
</div>

html{
    font-size: 16px;
}
.p1 {font-size: 16px;}
.s1 {font-size: 2rem;} // 32px
.s1-1 {font-size: 2rem}; // 32px

.p2 {font-size: 16px;}
.s5 {font-size: 4rem;} // 64px
.s6 {
    font-size: 2rem; // 32px
    line-height: 2rem; // 32px (本來是根據當前字體來換算，但此時他是依據跟元素的字體大小)
 }

rem佈局原理：
rem佈局的原理實際上是基於寬度，等比例縮放，讓html字體恆等於屏幕寬度的百分之幾，因此當不一樣的手機屏幕寬度，跟元素的字體大小也隨之不同，子元素的字體實際大小也不同，這就實現了，自適應。

咱們能夠經過js來設置html字體恆等於屏幕的寬度的百分之幾

let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
let htmlDom = document.getElementsByTagName('html')[0];
// 咱們以ihpne5的寬度做爲適配，獲得跟元素爲16像素（320/16 = 20），因此寬度/20就能獲得16像素
htmlDom.style.fontSize = htmlWidth / 20 + 'px';