viewport和media query_html/css_WEB-ITnose

viewport:

You can define the width of the viewport. If you do not use width=device-width, your page will extend beyond the viewport layout on the mobile terminal. Width (width=980px), if you use width=device-width, your page will be displayed with the appropriate mobile width (width=320px), we can use meta tags:

viewport - target-densitydpi

Before talking about this attribute, let’s talk about pixel-px. Taking the computer desktop as an example, under the same monitor, there is no need to display it at different resolutions. At high resolution, desktop icons will be displayed smaller, and at low resolution The icon will be displayed larger at lower speed.

Android introduces target-densitydpi. When setting target-densitydpi=device-dpi, on the same large mobile phone screen, pictures and text will be displayed on high-resolution devices. It will be displayed smaller on the device, and conversely, it will be displayed larger on the low-resolution device.

viewport - scaling

in On most mobile phones, the default zoom may trigger "zoom" on mobile browsers. To prevent users from zooming, you can set initial-scale=1.0. Here is the complete writing of the mobile window:

< meta name="viewport" content="width=device-width, initial-scale=1.0">

Media Queries

CSS Media Queries - max/min-device-width

max-width and min-width are updated when you rotate the screen, your max-width in portrait mode become max-height in landscape mode

When you rotate the phone screen, max-width and min-width will be updated, and the maximum horizontal width will become the maximum height vertically, as shown in the figure:

@media only screen and (min-width : 480px) { .box { width:200px; height:200px; background:yellow; } }@media only screen and (max-width : 320px) { .box {width:200px; height:200px; background:red; } }

Note: The difference between max/min-width and max/min-device-width.

Literally speaking, one is the maximum/minimum width, and the other is the maximum/minimum device width. If width=device-width is set, max/min-width and max/min-device-width are the same in landscape mode. Yes, but it is different in portrait mode. To put it simply, max/min-width will be updated when you rotate the screen, but max/min-device-width will not be updated.

CSS Media Queries - device-pixel-ratio

device-pixel-ratio can let us know the resolution of the device screen. The pixel ratio of some mobile phones will be greater than or equal to 1.5. If If you want to implement layout on high-resolution devices, you can use the following media query:

@media only screen and (-webkit-min-device-pixel-ratio : 1.5),

only screen and (-o-min-device-pixel-ratio: 3/2),

only screen and (min-device-pixel-ratio : 1.5) {

.imagebox { background:(url:"images/high/demo.jpg");}

}

Note: If the above method is used, the image will be the same even if the above rule is not used It will load.

CSS Media Queries - Orientation

Both iPhone and iPad have landscape and portrait screens, use the following media query can use the corresponding css on horizontal and vertical screens respectively

/* iPads (landscape) ----------- */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

/* Styles */

}

/* iPads (portrait) ---------- */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {

/* Styles */

}