文章目錄

• pixel&resolution(像素和分辨率)
• • reference
  • 像素和分辨率
  • • 分辨率
    • 屏幕像素
    • 像素&分辨率示例
    • 圖像像素
    • 小結
    • css 像素
  • 開發(fā)中遇到的像素問題
  • • 使用密度無關像素(android)
    • 將 dp 單位轉換為像素單位
  • css pixel & device pixel
  • • references
    • px&dpi(device pixel & css pixel)
    • Absolute length units
    • • detail list of absolute length unit
    • Relative length units
    • • Font-relative lengths
      • Viewport-percentage lengths
  • CSS resolution
  • • Examples
    • Use in a media query
    • Valid resolutions
    • Invalid resolutions

pixel&resolution(像素和分辨率)

reference

• What is pixel? - Definition from WhatIs.com (techtarget.com)
• What is resolution? - Definition from WhatIs.com (techtarget.com)
• What is a Pixel? - Definition from TechopediaWhat is a Pixel? - Definition from Techopedia
• MDN

像素和分辨率

• A pixel is represented by a dot or square on a computer monitor display screen.
• Pixels are the basic building blocks of a digital image or display and are created using geometric coordinates.
• Depending on the graphics card and display monitor, the quantity, size and color combination of pixels varies and is measured in terms of(根據) the display resolution.
  • For example, a computer with a display resolution of 1280 x 768 will produce a maximum of 98,3040 pixels on a display screen.(當一個pixel大小等同于一個 dot的時候達到最多)
• The pixel resolution spread also determines the quality of display;
  • more pixels per inch of monitor screen yields better image results.
    • For example, a 2.1 megapixels(百萬像素) picture contains 2,073,600 pixels since it has a resolution of 1920 x 1080.
• The physical size of a pixel varies, depending on the resolution of the display.
  • It will equal the size of the dot pitch if the display is set to its maximum resolution,
  • and will be larger if the resolution is lower since each pixel will use more dots.
  • Because of that, individual pixels may become visible, leading to a blocky and chunky image defined as “pixelated”.
    • 也就是說,如果當一個圖像像素占據了過多的屏幕物理點(dot),此時的一個pixel的大小顯然會大于一個屏幕dot
• Pixels are uniformly arranged in a two-dimensional grid, although some different sampling patterns are available.
  • For example, in LCD screens the three main colors are sampled at different locations of a staggered grid(交錯網格), while digital color cameras use a more regular grid.
• In computer monitors, pixels are square-shaped, meaning that their vertical and horizontal sampling pitches are equal.
• In other systems such as the anamorphic(可變性的) widescreen format of the 601 digital video standard, the shape of a pixel is rectangular.
• Each pixel has a unique logical address, a size of eight bits or more and, in most high-end display devices, the ability to project millions of different colors.
• The color of each pixel is determined by the specific blending of the three main components of the RGB color spectrum.
• Depending on the color system, a different number of bytes can be allocated for specifying each color component of the pixel.
  • For example, in 8-bit color systems, only one byte is allocated per pixel, limiting the palette to just 256 colors.
  • In the common 24-bit color systems used for nearly all PC monitors and smartphone displays, three bytes are allocated, one for each color of the RGB scale, leading to a total of 16,777,216 color variations.
  • A 30-bit deep color system allocates 10 bits each of red, green, and blue for a total of 1.073 billion color variations.
• However, since the human eye cannot discriminate more than ten million colors, more color variations do not necessarily add more detail, and may even lead to color banding issues.

分辨率

• In computers, resolution is the number of pixels (individual points of color) contained on a display monitor, expressed in terms of the number of pixels on the horizontal axis and the number on the vertical axis. The sharpness of the image on a display depends on the resolution and the size of the monitor.
• The same pixel resolution will be sharper on a smaller monitor and gradually lose sharpness on larger monitors because the same number of pixels are being spread out over a larger number of inches.(人口密度)
• A given computer display system will have a maximum resolution that depends on its physical ability to focus light (in which case the physical dot size - the dot pitch - matches the pixel size) and usually several lesser resolutions.
  • For example, a display system that supports a maximum resolution of 1280 by 1023 pixels may also support 1024 by 768, 800 by 600, and 640 by 480 resolutions.
  • Note that on a given size monitor, the maximum resolution may offer a sharper image but be spread across a space too small to read well.
  • Display resolution is not measured in dots per inch as it usually is with printers.
  • However, the resolution and the physical monitor size together do let you determine the pixels per inch.
  • Typically, PC monitors have somewhere between 50 and 100 pixels per inch.
    • For example, a 15-inch VGA (see display modes) monitor has a resolution of 640 pixels along a 12-inch horizontal line or about 53 pixels per inch.
    • A smaller VGA display would have more pixels per inch.

屏幕像素

• 是指,屏幕上的一個點

像素&分辨率示例

譬如,我的設備屏幕硬件分辨率為1920*1080

如果我調整分辨率

• 調整為1280*720:,那么此時屏幕上的各個元素(包括字體)都會變得很大,但這種放大會導致字體/窗口邊界模糊,體驗極差
  • windows輸出的顯示圖像的信息量為1280*720,在不拉伸(不做鋪滿的情況下,雖然用不完整個屏幕,但是輪廓還是清晰的;但是windows將這 1280*720鋪滿至 1920*1080,就導致圖像信息單位面積內的信息量(信息密度)很低,所以看起來邊界不清晰,出現(xiàn)馬賽克(像素)化)
• 這是因為,顯示的圖像上的每個pixel都被一定程度的放大了,來鋪滿真?zhèn)€屏幕,覆蓋整個屏幕(1920*1080)后,這時候,圖像的1pixel大于物理設備的一個點(dot)的大小

圖像像素

• A pixel is also known as a picture element (pix = picture, el = element)
• A pixel is the basic logical unit in digital graphics. Pixels are combined to form a complete image, video, text, or any visible thing on a computer display.
• A pixel is the smallest unitof a digital image or graphic that can be displayed and represented on a digital display device.
• 像素是指由圖像的小方格組成的，這些小方塊都有一個明確的位置和被分配的色彩數值，小方格顏色和位置就決定該圖像所呈現(xiàn)出來的樣子。
• 可以將像素視為整個 圖像中不可分割的單位或者是元素。
  • 不可分割的意思是它不能夠再切割成更小單位抑或是元素，它是以 一個單一顏色的小格存在。
• 一個點陣圖像包含了一定量的像素，這些像素決定圖像在屏幕上所呈現(xiàn)的大小。

小結

• 一個像素到底有多大?

  • 和顯示圖像的設備聯(lián)系起來,設備上的點(dot)是固定的size;而一幅圖像所具有的有效信息量是固定的(像素數量是固定的,像素大小可以被放大,但是像素數量還是那些)
  • 當我們使用軟件放大圖像,圖像上的像素就被放大,導致一個像素對應(占據)了更多的的物理dot;這些物理dot是實實在在的物理大小

• 具有高dpi的屏幕圖像顯示的關系

  • 當一幅圖像(S)信息量充分大(像素充分多,對應的圖像分辨率也大),在一塊好的高dpi屏幕A(屏幕物理大小規(guī)格為WH)上就更充分的表現(xiàn)細節(jié)(假設鋪滿屏幕)(屏幕A的分辨率上限大)
  • 而一塊低dpi屏幕B(屏幕物理大小規(guī)格也為WH),其分辨率上限小(整塊屏幕含有的dot少于A屏幕);無法充分表現(xiàn)出原圖片S的細節(jié),同樣鋪滿屏幕的情況下,這種情況下,屏幕B可能會采樣來表示圖片S
  • 圖片的分辨率大于設備分辨率或者小于設備的分辨率的顯示問題
    • 圖像分辨率是一幅圖片中像素的組成數量，如1024X768的圖片，有1280X1024的圖片，也有非常大的如2560X1600分辨率的圖片等。
    • 當圖像的分辨率大于顯示器的分辨率時有兩種顯示方法，一種是局部顯示，即屏幕的像素有多少就顯示多少像素，這時只能看到圖片的某一部分，可以上下左右的移動來看完整的內容。另一種方法是在屏幕內顯示完整的圖像，這時圖片的像素會被壓縮，如2560X1600的圖片會刪去一部分像素，以1920X1080的分辨率（顯示屏的分辨率）來顯示。
    • 這時可以看到完整的圖片內容，不過在細節(jié)上是丟失一小部分像素的，如用 數碼相機 的屏幕也可以看到完整的照片，不過感覺很模糊，放在電腦上看就好多了，因為屏幕的分辨率低。

css 像素

• 96pixel=1inch(這里的 pixel 和尺子上的長度可以直接掛鉤)

開發(fā)中遇到的像素問題

使用密度無關像素(android)

• 您必須避免的第一個陷阱是使用像素來定義距離或尺寸。

• 使用像素來定義尺寸會帶來問題，因為 不同的屏幕具有不同的像素密度(dpi:dot per inch;ppi:pixel per inch)，所以 同樣數量的像素在不同的設備上 可能對應于不同的物理尺寸(本征尺寸))。

• 尺寸相同的兩個屏幕可能具有不同數量的像素
  

• android 提供的解決方案:

  • 要在密度不同的屏幕上保留界面的可見尺寸，您必須使用密度無關像素 (dp) 作為度量單位來設計界面。
  • dp 是一個 虛擬像素單位，1 dp 約等于中密度屏幕（160dpi；“基準”密度）上的 1 像素。
    • 對于其他每個密度，Android 會將此值轉換為相應的 實際像素數。

將 dp 單位轉換為像素單位

在某些情況下，您需要以 dp 表示尺寸，然后將其轉換為像素。dp 單位轉換為屏幕像素很簡單：

px = dp * (dpi / 160)

• 假設在某一應用中，用戶的手指至少移動 16 像素之后，系統(tǒng)才會識別出滾動或滑動手勢。
• 在基線屏幕上，用戶必須移動 16 pixels / 160 dpi（等于一英寸的 1/10 或 2.5 毫米,(基準密度屏幕上 160pixel=1inch=2.5cm;16pixel=0.25cm=2.5mm,)），系統(tǒng)才會識別該手勢。
• 而在配備 高密度顯示屏 (240dpi) 的設備上，用戶的手指必須至少移動 16 pixels / 240 dpi，相當于 1 英寸的 1/15（1.7 毫米）。
  • 此距離短得多(1.75<2.5)，因此用戶會感覺應用在 該設備上更靈敏。

css pixel & device pixel

• One pixel. For screen displays, it traditionally represents one device pixel (dot).

• However, for printers and high-resolution screens, one CSS pixel implies multiple device pixels. 1px = 1/96th of 1inch.

• css pixel:實際應用中，當使用單位 px 時，讓 96px 的距離等同(屏幕上的)大約 1 英寸就合格了

  • 無論屏幕的實際像素密度是多少。

• The term CSS pixel is synonymous with theCSS unitofabsolute length px — which is normatively defined as being exactly 1/96th of 1 inch.

references

• See also
• CSS: Cascading Style Sheets | MDN (mozilla.org)
• length - CSS（層疊樣式表） | MDN (mozilla.org)
• resolution | MDN (mozilla.org)
• CSS Length Explained on the MDN Hacks Blog

---

px&dpi(device pixel & css pixel)

• 如果一個屏幕的像素密度是 266 DPI，且屏幕上一個元素(比如一段文本<p>)的寬度是 96px(css pxiel)=1 inch(譬如通過屬性width=96px來設置)，那么這個元素的實際寬度用設備像素(dot)來衡量是 266 設備像素(device pixel)。

  • dpi:圖像每英寸長度內的像素點數。
    • DPI（Dots Per Inch，每英寸點數）是一個量度單位，用于點陣數碼影像，
    • 指每一英寸長度中，取樣、可顯示或輸出點的數目。
    • dpi越高,線條的表現(xiàn)可以越清晰(平滑)

Absolute length units

• Absolute length units represent a physical measurement when the physical properties of the output medium are known, such as for print layout.

• This is done by anchoring one of the units to a physical unit, and then defining the others relative to it.

• The anchor is done differently for low-resolution devices, such as screens, versus high-resolution devices, such as printers.

• For low-dpi devices, the unit px represents the physical reference pixel; other units are defined relative to it.

• Thus, 1in is defined as 96px, which equals 72pt.

• The consequence of this definition is that on such devices, dimensions described in inches (in), centimeters (cm), or millimeters (mm) don’t necessary match the size of the physical unit with the same name.

For high-dpi devices, inches (in), centimeters (cm), and millimeters (mm) are the same as their physical counterparts. Therefore, the px unit is defined relative to them (1/96 of 1 inch).

Note: Many users increase their user agent’s default font size to make text more legible.

• Absolute lengths can cause accessibility problems, since they are fixed and do not scale according to user settings.
• For this reason, prefer relative lengths (such as em or rem) when setting font-size.

detail list of absolute length unit

px

One pixel. For screen displays, it traditionally represents one device pixel (dot). However, for printers and high-resolution screens, one CSS pixel implies multiple device pixels. 1px = 1/96th of 1in.

cm

One centimeter. 1cm = 96px/2.54.

mm

One millimeter. 1mm = 1/10th of 1cm.

Q

One quarter of a millimeter. 1Q = 1/40th of 1cm.

in

One inch. 1in = 2.54cm = 96px.

pc

One pica. 1pc = 12pt = 1/6th of 1in.

pt

One point. 1pt = 1/72nd of 1in.

Relative length units

Relative lengths represent a measurement in terms of some other distance. Depending on the unit, this can be the size of a specific character, the line height, or the size of the viewport.

Font-relative lengths

Font-relative lengths define the <length> value in terms of the size of a particular character or font attribute in the font currently in effect in an element or its parent.

Note: These units, especially em and rem, are often used to create scalable layouts, which maintain the vertical rhythm of the page even when the user changes the font size.

• cap

  Represents the “cap height” (nominal height of capital letters) of the element’s font.

• ch

  Represents the width, or more precisely the advance measure, of the glyph “0” (zero, the Unicode character U+0030) in the element’s font.In the cases where it is impossible or impractical to determine the measure of the “0” glyph, it must be assumed to be 0.5em wide by 1em tall.

• em

  Represents the calculated font-size of the element. If used on the font-size property itself, it represents the inherited font-size of the element.

• ex

  Represents the x-height of the element’s font. On fonts with the “x” letter, this is generally the height of lowercase letters in the font; 1ex ≈ 0.5em in many fonts.

• ic

  Equal to the used advance measure of the “水” glyph (CJK water ideograph, U+6C34), found in the font used to render it.

• lh

  Equal to the computed value of the line-height property of the element on which it is used, converted to an absolute length.

• remRepresents the font-size of the root element (typically <html>). When used within the root element font-size, it represents its initial value (a common browser default is 16px, but user-defined preferences may modify this).

• rlh Equal to the computed value of the line-height property on the root element (typically <html>), converted to an absolute length. When used on the font-size or line-height properties of the root element, it refers to the properties’ initial value.

Viewport-percentage lengths

Viewport-percentage lengths define the <length> value relative to the size of the viewport, i.e., the visible portion of the document. Viewport lengths are invalid in @page declaration blocks.

• vh

  Equal to 1% of the height of the viewport’s initial containing block.

• vw

  Equal to 1% of the width of the viewport’s initial containing block.

• vi

  Equal to 1% of the size of the initial containing block, in the direction of the root element’s inline axis.

• vb

  Equal to 1% of the size of the initial containing block, in the direction of the root element’s block axis.

• vmin

  Equal to the smaller of vw and vh.

• vmax

  Equal to the larger of vw and vh.

CSS resolution

分辨率：用于描述媒體查詢中的分辨率的 <resolution> CSS數據類型表示輸出設備的像素密度。

在屏幕上，單位與CSS英寸，厘米或像素有關，而與物理值無關。

Syntax

數據類型由嚴格為正<number>組成，后跟下面列出的單位之一。與所有CSS維度一樣，單位字面值與數字之間沒有空格。

單位

• dpi

  表示每英寸的點數。屏幕通常每英寸包含72或96個點，但打印文檔的dpi通常要大得多。 1英寸是2.54厘米，1dpi≈0.39dpcm。

• dpcm

  每厘米上的點數。1英寸是2.54厘米, 1dpcm ≈ 2.54dpi.

• dppx

  表示每個px的點數。 由于CSS px的固定比率為1:96，因此1dppx相當于96dpi。

  • which corresponds to the default resolution of images displayed in CSS as defined by image-resolution (en-US).

• x

  dppx 的別名

Note: Although the number 0 is always the same regardless of unit, the unit may not be omitted. In other words, 0 is invalid and does not represent 0dpi, 0dpcm, or 0dppx.

Examples

• Examples

Use in a media query

• Use in a media query

@media print and (min-resolution: 300dpi) { ... }

Valid resolutions

• Valid resolutions

96dpi 50.82dpcm 3dppx

Invalid resolutions

• Invalid resolutions

72 dpi Spaces are not allowed between the number and the unit. ten dpi The number must use digits only. 0 The unit is required.

總結

以上是生活随笔為你收集整理的pixel(css pixel device pixel)resolutioncss pixel(像素和分辨率)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。