An article that really teaches you to develop mobile pages (i)

An article that really teaches you to develop mobile pages (i)

What is a pixel?
Pixel: A pixel is the smallest area on a computer screen that can display a specific color. This is the concept of pixels, in fact, in the Web front-end development area, the pixel has the following two layers meaning:

Device pixels: The physical pixels of the device screen, and the number of physical pixels is fixed for any device.
CSS pixels: This is an abstract pixel concept that is created for Web developers.

1 Web front-end areas, pixels divided into device pixels and css pixels
The size of the 21 CSS pixels is variable, such as zooming in and out of the page, actually shrinking or magnifying the CSS pixels, and the device pixels are constant regardless of size or quantity. When you zoom out, a CSS pixel gets smaller;

Generally a CSS pixel equals a device pixel scale=1, an apple screen with a high density of about 4 physical pixels in a CSS pixel. When a page is zoomed out, many css pixels correspond to a single device pixel.

Two or three x viewports
The default width of a block element is the width of the 100%,body of its parent element is 100% of the HTML, and whose HTML is based on?
Remember the word: The viewport is the parent element of HTML, so we call the viewport the initial containing block. So you can see that the percentage of HTML elements is based on the viewport.

All right, the three viewports at the mobile end are over, let's summarize:
1 on the PC side, the layout viewport is the browser window
2 on the mobile side, the viewport is divided into two: layout viewport (680-1024px, adapt to some PC Web site, web development corresponding CSS viewport), visual viewport (eyes see the size)
The 3 Mobile also has an ideal viewport, which is the ideal size for the layout viewport, which is the ideal layout viewport. (Note: The size of the ideal viewport varies by device and browser, but it doesn't matter to us)
4 Our CSS is based on the layout viewport
This tells the browser to set the layout viewport to the ideal viewport: <meta name= "viewport" content= "Width=device-width"/>
Width refers to the width of the layout viewport; Device-width refers to the widths of ideal viewports;

three-device pixel ratio (dpr:device pixel ratio)
The establishment premise, the scale ratio is 1;
Device pixel ratio DPR = number of device pixels/number of ideal viewport css pixels (device-width)

To open the Browser debugging tool:
The ideal viewport for 1 iphone5 is: 320*568 device-width:320 device-height:568
2 Iphone5 Device pixel ratio is 2
According to the formula, the iphone5 device pixels are: 640*1136;

Scaling:
The formula is that the scaling ratio is the size of the 1,css pixels can be changed, scaling from the technical implementation of the point of view, is to enlarge or reduce the CSS pixel process, when you use two-finger zoom to reduce the page, is actually to enlarge or reduce the CSS pixels.
Zoom: Zoom Out is the CSS pixel.

META Tags:
The META tag exists primarily to set the layout viewport width to the width of the ideal viewport, with the following syntax:
<meta name= "viewport" content= "Name=value"/>
Where the content property is a string value, the string is composed of a comma-separated name/value pair, in total 5:
1 Width: Sets the width of the layout viewport
2 Init-scale: Set the initial zoom level of the page
3 Minimum-scale: Set the minimum zoom level of the page
4 Maximum-scale: Set the maximum zoom level of the page
5 user-scalable: Whether the page is allowed to zoom to the user
<meta name= "viewport" content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, User-scalable=no "/>
This means that the width of the layout viewport is equal to the width of the ideal viewport, the initial scale of the page and the maximum minimum zoom ratio is 1, and the user is not allowed to scale the page

Media Enquiry:
Media query is the basis of responsive design, there are three main features:
1 types of media detected, such as: SCREEN,TV, etc.
2 detection of the layout of the characteristics of the viewport, such as: wide and high resolution
3 feature-related queries (not useful for web development)
syntax for using media queries in CSS:
@media Media type and (viewport characteristic threshold) {
CSS style code that satisfies the criteria
}
Instance:
@media all and (min-width:321px) and (max-width:400px) {
. box{
background:red;
}
}
In the above code, the media type is all, representing any device, and the device's layout viewport width is greater than or equal to 321px and is less than or equal to 400px, so that the background of the element with the box class becomes red.

An article that really teaches you to develop mobile pages (i)