Mobile Web Learning Notes

Source: Internet
Author: User

Pixel Pixel Basics:

Pixels are the basis of a page layout. A pixel is the smallest area in which a computer can display a particular color. When the device is the same size but the pixels become denser, the screen can display a more detailed transition and the site looks more crisp.

Px:pixel, pixels, the smallest unit displayed on the screen for web design, intuitive and convenient;

Pt:point, is a standard length unit, 1pt=1/72 inches, for the printing industry, very simple to use;

EM: That is,%, in CSS, 1em=100%, is a ratio, combined with the use of CSS inheritance relationship, with flexibility;

PPI (DPI): pixel (dot) per inch, the number of pixels per inch (dots), is a rate that represents "sharpness", "precision".

Classification:

There are actually two types of pixels: device pixels and css pixels

1, device independent pixels: the physical pixels of the device screen, the number of physical pixels of any device is fixed

2, css pixels (css pixels): Also known as logical pixels, is created for Web developers, in CSS and JavaScript used in an abstract layer

CSS pixels are used for every CSS declaration and almost all JavaScript properties, so you never actually use device pixels, the only exception being screen.width/height

Scaling:

On the desktop side, the CSS's 1 pixels are often the 1 physical pixels that correspond to the computer screen.

On the mobile side, scaling is a recurring operation due to screen size limitations.

Regardless of whether we zoom in or out, the CSS pixels set by the element (such as width:300px) are always constant, and how many device pixels a CSS pixel corresponds to depends on the current zoom ratio.

Device pixel bloom ratio DPR (devicepixelratio):

DPR = device pixel/css pixel (in One Direction)

The device pixel has a JavaScript attribute corresponding to DPR Window.devicepixelratio

Take iphone5 as an example, the iphone5 CSS Pixel is 320PX*568PX,DPR is 2, so its device pixel is 640px*1136px
    640 (PX)/(px)  = 2    1136 (px)/568 (px) = 2    640 (px) *1136 (px)/(px)  *568 (px) = 4

PPI and how it is calculated:

PPI:pixels per inch is the number of pixels that are owned by inches.

The calculation method is very simple, the number of pixels in the diagonal direction is calculated by the number of pixels with long heel height (right triangle), and then the pixel count of the diagonal is divided by the screen size is the PPI.
The formula is expressed as ppi=√ (x^2+y^2)/z (X: Length pixels, Y: width pixels; Z: Screen size).

Mobile Web Learning Notes

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.