Viewport and media query, viewportquery

Viewport and media query, viewportquery

Viewport:

You can define the width of the viewport. if you do not use width = device-width, the page extension on the mobile terminal will exceed the window layout width (width = 980px). If you use width = device-width, your page will be displayed as the appropriate width of the mobile terminal (width = 320px). We can use the meta tag:

<Meta name = "viewport" content = "width = device-width">

 

Viewport-target-densitydpi

 

Before you talk about this attribute, let's talk about pixel-px. take the desktop as an example. There is no need to display different resolutions under the same monitor. The desktop icon is smaller in the high resolution, while the low resolution icon is larger.

Android introduces target-densitydpi. when target-densitydpi = device-dpi is set, images and text on the same large mobile phone screen will be smaller on the device with high resolution. Otherwise, devices with lower resolution will be larger.

 

Viewport-scaling

In most mobile phones, the default scaling on the mobile browser may trigger "zoom ". to prevent user scaling, you can set initial-scale = 1.0. The following describes the complete method of Moving Windows:

<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 mobile phone screen, the max-width and min-width values are updated, and the maximum horizontal width is changed to the maximum vertical height ,:

@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, one is the Maximum/minimum width, and the other is the Maximum/minimum device width. if width = device-width is set, the values of max/min-width and max/min-device-width are the same in Landscape mode, but different in portrait mode. simply put, 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 lets us know the resolution of the device's screen. The pixel ratio of some mobile phones is greater than or equal to 1.5. If you want to implement the layout on a high-resolution device, 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, it will be loaded even if the above rule image is not used.

 

CSS Media Queries-direction

Both iPhone and ipad have horizontal and vertical screens. You can use the following media query to use the corresponding css on the horizontal screen and vertical screen 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 */

}