成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

css 像素

Sourcelink / 1796人閱讀

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

前言：

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

css提供表達(dá)長(zhǎng)度的單位有很多種。當(dāng)我們?cè)谶x擇使用這些單位時(shí)，需要去考慮，他們的輸出媒體是什么，不同的輸出媒體，我們需要使用不同的單位。

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

1.cm,mm,in,pt,pc

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

絕對(duì)單位之間的關(guān)系為：1in = 2.54cm = 25.4mm = 72pt = 6pc

2.ex

單位ex：必須與字體的x-height有關(guān)的大?。▁-字高，指小寫字母的高度）。很少使用。

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

單位%:

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

eg:



    
    


    

        
父親

        
兒子

4.px

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

4.1 物理像素：

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

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

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

2.屏幕尺寸：這個(gè)5.2英寸是手機(jī)屏幕對(duì)角線的長(zhǎng)度，用勾股定理可以直接算出來。

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

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

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

4.2 邏輯像素：

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

4.3 渲染像素：

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

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

5.em與rem

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

em

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/117060.html

相關(guān)文章

  • 【響應(yīng)式布局】理解設(shè)備像素、設(shè)備獨(dú)立像素和css像素

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

    sunny5541 評(píng)論0 收藏0

  • 設(shè)備像素，CSS像素，設(shè)備獨(dú)立像素

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

    468122151 評(píng)論0 收藏0

  • 像素，css像素，物理像素，設(shè)備獨(dú)立像素，分辨率大亂斗

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

    LiveVideoStack 評(píng)論0 收藏0

  • CSS > 高清縮放原理分析

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

    zhjx922 評(píng)論0 收藏0

  • 前端：移動(dòng)開發(fā) - 像素、viewport

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

    QLQ 評(píng)論0 收藏0

  • CSS像素(css pixel)及像素單位 例如px pt em

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

    mochixuan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<