css 像素

Sourcelink 發(fā)布于2019-08-30 15:54 / 1793人閱讀

摘要：出現(xiàn)不同手機文字大小不一樣的根本原因是在于設備的像素比不一樣。通過上述我們可以知道邏輯像素不等于物理像素。渲染像素渲染像素是系統(tǒng)基于邏輯像素進行對應倍增或而得的結果。

前言：

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

css提供表達長度的單位有很多種。當我們在選擇使用這些單位時，需要去考慮，他們的輸出媒體是什么，不同的輸出媒體，我們需要使用不同的單位。

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

1.cm,mm,in,pt,pc

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

絕對單位之間的關系為：1in = 2.54cm = 25.4mm = 72pt = 6pc

2.ex

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

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

3.%

單位%:

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

4.px

我們在做移動頁面開發(fā)的時候經(jīng)常會遇到在不同的手機上看，里面的圖片、文字或者線的大小會不一樣。在iphone4以前,1px == 1個物理像素的寬度，但是從 iPhone4 開始，蘋果推出了視網(wǎng)膜屏幕，分辨率提高了一倍，而屏幕尺寸卻沒變，這時1px == 4個硬件上的像素點 (2 x 2)（是原來的2倍，后面iphone6s又出現(xiàn)了3倍）。出現(xiàn)不同手機文字大小不一樣的根本原因是在于設備的像素比（PPI）不一樣。PPI的值越高，畫質越好，也就是越細膩，看起來更有逼格。所以我們在移動頁面開發(fā)中使用px，無法去適應各種屏幕。那么什么是PPI,我們先理解幾個概念：物理像素，邏輯像素，渲染像素。

4.1 物理像素：

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

簡化版本：(文中拿華為榮耀7作為例子)

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

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

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

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

最后算出來的結果為華為榮耀7的ppi為423.6359942465958約為424

4.2 邏輯像素：

邏輯像素就是我們常說的css像素單元。通過上述我們可以知道邏輯像素不等于物理像素。

4.3 渲染像素：

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

我們在開發(fā)移動頁面是需要考慮的是如何讓頁面在各個手機看起來都正常顯示，那么我們應該考慮的是渲染像素，但是如果我們針對手機，一個個去匹配的話又不現(xiàn)實。所以這時候我們就應該考慮em跟rem，來彈性適應各種大小。

5.em與rem

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

em是根據(jù)父元素的大小來適應的，可以等比例縮放匹配所有屏幕
如果父元素為16px, 那么子元素1em == 16px。
舉個

GPU云服務器云服務器屏幕像素實際像素像素存儲高像素

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/117060.html

【響應式布局】理解設備像素、設備獨立像素和css像素

摘要：設備像素設備分辨率設備像素也叫物理像素。從圖中可以驗證，橫縱方向的設備像素數(shù)量恰好是設備獨立像素的倍。像素與設備獨立像素的關系縮放比例就是像素邊長設備獨立像素邊長。因為的寬度沒有改變，無論以什么單位衡量設備像素設備獨立像素還是像素。這篇文章是我在我的舊博客上發(fā)過的文章，最近又碰到這個問題，整理修改了一下發(fā)到這里。像素單位像素單位有設備像素、邏輯像素和CSS像素3種。設備像素（d...

sunny5541 2019-08-30 13:51 評論0 收藏0
設備像素，CSS像素，設備獨立像素

摘要：設備獨立像素是一個整體概念，包括了像素，比如像素，只是在機中，像素不叫像素了，而叫設備獨立像素。設備像素和獨立設備像素的關系實例已為例設備寬高為，可以理解為設備獨立像素或像素。獲得設備像素比后，便可得知設備像素與像素之間的比例。 1.概念設備像素（device pixel）簡寫DP 設備像素又稱 **物理像素** ，是設備能控制顯示的最小單位，我們可以把它看做顯示器上的一個點。我們常...

468122151 2019-08-29 16:15 評論0 收藏0
像素，css像素，物理像素，設備獨立像素，分辨率大亂斗

摘要：我們用小米舉例，屏幕像素物理像素為，設備獨立像素為，也就是說，一個設備獨立像素就包含個物理像素，同時我們能得出。本文主要闡述移動端布局中常遇到的一些基本概念，這些概念也適用于PC端，這些概念大概有：像素（pixel），ppi，分辨率，物理像素（physical pixel）， CSS像素，設備獨立像素（devicedependent pixel）像素像素是圖像顯示的基本單位，同時...

LiveVideoStack 2019-08-30 15:54 評論0 收藏0
CSS > 高清縮放原理分析

摘要：最近在研究屏的適配問題，在具體方案討論之前，陸續(xù)做了一些理解筆記，現(xiàn)歸納如下。最近在研究 Retina 屏的適配問題，在具體方案討論之前，陸續(xù)做了一些理解筆記，現(xiàn)歸納如下。具體方案的討論將另作文章。中的 viewport 是布局視口 initial-scale 等的縮放是基于理想視口的理想視口由設備各自提供，理想視口的寬度也是設備的獨立像素所謂獨立是說這個設備獨立像素和像素...

zhjx922 2019-08-30 12:56 評論0 收藏0
前端：移動開發(fā) - 像素、viewport

摘要：表示單位面積上的物理像素點數(shù)目。比如原本像素高的頂部導航欄，在屏上用了個像素的高度來顯示。參考譯此像素非彼像素譯不是像素的像素不是像素移動前端開發(fā)之的深入理解移動端尺寸基礎知識張鑫旭設備像素比簡單介紹知識 CSS 像素、物理像素、PPI CSS 像素 CSS 像素是 Web 編程的概念，本質上是為我們 Web 開發(fā)者創(chuàng)建的一個抽象結構，是相對的而不是絕對的。物理像素物理像素是...

QLQ 2019-08-29 10:58 評論0 收藏0
CSS像素(css pixel)及像素單位例如px pt em

摘要：像素概念一般而言，像素是圖像的基本采樣單位。我們通常所說的顯示器分辨率，其實是指桌面設定的分辨率，而不是顯示器的物理分辨率。小序最近在做pc端、微信端、移動端app,公司的每個項目分別都有這三者，在pc端調(diào)試頁面，像素顯示都和預期效果的一樣，可是，微信頁面和手機頁面卻天差地別，在goole里調(diào)試得好好的，結果，真機看效果，用同事們的手機有不同的顯示效果，于是，對于像素單位有了興趣，...

mochixuan 2019-08-30 13:00 評論0 收藏0