What is a pixel? What are the categories?

Device Pixels Device independent pixels CSS pixels logical pixels

Device pixel, or physical pixel (the smallest physical unit of a display, made up of three primary colors) is also commonly referred to as screen resolution.

Usually logical resolution abstractly refers to the resolution of device-independent pixels (independent of device pixel units) latitude.

An independent device pixel consists of several physical pixels, the screen resolution set by the operating system (i.e., independent device pixel resolution).

CSS pixels are units of pixels used by browsers. CSS pixels are usually equivalent to device-independent pixels when the page is zoomed in at 100%, but when the page is percentage-scaled and zoomed in at 200%, one CSS pixel is four device-independent pixels.

In a word, in a word

  • Device pixels can correspond to hardware parameter systems.
  • Device pixels are operating system parameters.
  • CSS pixels are software application parameter systems.
  • Resolution is an abstract definition used to describe the precision of a screen image. Such as devices, logical resolution, etc.

CSS pixels and device-independent pixels are the embodiment of logical pixels. Usually, the ratio of converted pixels is device pixels and device-independent pixels. Therefore, logical pixels are usually called device-independent pixels, but the name is not accurate.

Common complex pixel scenes? Sort out the problem model and solve it systematically

First, insert a little question: what is the pixel ratio represented by Window.devicepixelRatio?

  • When the page is not scaled

Window. devicePixelRatio = device-independent pixel/device pixel

  • When a web page is scaled

Window. devicePixelRatio = Device-independent pixel/CSS pixel = Device-independent pixel/Device pixel x Scaling ratio

Explore device pixels, device independent pixels, CSS pixels in Mac Pro:

  1. 1440 * 900 (device independent pixel resolution) System Settings -> Monitor
  2. 2560 x 1600 (device pixel resolution) about the native -> display
  3. If CSS resolution of a web page is 1440 * 1472, window.devicePixelRatio = 2
  4. If a web page has 200% CSS pixel resolution (720 * 736), window.devicepixelRatio = 4

A page in UI, product, business user level consideration is unified but also scattered, in the depth of specific responsive design plan usually do resolution analysis, user analysis, traffic characteristics analysis.

Resolution analysis

  • 360-480 (Vertical phone)

  • >= 480&& < 768 (horizontal version mobile phone, small tablet) small flow

  • >= 768&& < 992 (plain plate)

  • = 992 && < 1280 (large tablet, small monitor, notebook)

  • = 1280&& < 1440 (ordinary monitor, ordinary notebook)

  • = 1440&& < 1920 (mainstream monitor)

  • > 1920 (2K, 4K display) small flow

Based on the above equipment analysis, the design specification and CSS breakpoint scheme can be obtained as follows:

UI design output main specifications, 360 design, 480 design, 992 design, 1280 design, 1440 design.

Special, small flow out compatible draft, 768 design draft, 1920 design draft.

CSS response breakpoint technical solution:

  • Xs-new (0-479) (Vertical version mobile phone)
  • Min-pad (480-767) (horizontal version mobile phone, small tablet)
  • sm-new (480 – 991)
  • Pad (768-991) (Plain tablet)
  • Min-laptop (992-1279) (Large tablet, small monitor, laptop)
  • Laptop (1280 – ~) (Normal monitor, normal laptop)
  • Lg (1440 – ~) (Mainstream display)
  • Xl (1920 – ~) (2K, 4K display)

Based on the above breakpoints, standard device fragmentation and cross-screen problems can be solved. However, specific to each user system, user-defined Settings will lead to different pixel ratios, such as:

  • The operating system modifies the pixel ratio of the device
  • The operating system modifies the zoom scale, resulting in a different pixel ratio on the device
  • Page scaling changes will result in different device pixel ratios and CSS pixel ratios

In order to ensure the integrity of the information screen and the convenience of interaction, usually alsoCommon content security areas need to be designed. Such as:

The button of the 150% enlarged retention form is blocked

The device pixel ratio conversion on Windows is 853×385, which roughly falls within the breakpoint range of 768 to 992 for a normal tablet, ensuring that the form content can be displayed on one screen at this height.

There will also be hd iPhone adaptations, such as:

  • IPhone5: Resolution 320 * 568, physical pixel 640 * 1136, @2x (multiplier)
  • IPhone6: Resolution 375 * 667, physical 750 * 1334, @2x
  • IPhone6 Plus: Resolution 414 * 736, physical pixel 1242 * 2208, @3x

Therefore, the following adaptations are required:

  • Hd adaptation, such as magnifying images, text and other content elements.

  • Screen height content adaptation of the first screen, content adaptation of the elastic layer (to avoid content spread need to use the scroll bar to view more content)