CSS3 matches the screen status, while CSS3 matches the screen status.

CSS3 matches the screen status, while CSS3 matches the screen status.

@ Media is defined in css3 and has powerful functions. The following describes whether to use @ media orientation of css3 to match the screen of a mobile phone.

As the name suggests, the PC cannot match the landscape, so orientation only works for mobile devices.

1. header Declaration
<Meta name = "viewport" content = "width = device-width, initial-scale = 1.0, user-scalable = no, maximum-scale = 1.0">

Add to

2. Whether the media matching screen is a horizontal screen or a vertical screen
@ Media all and (orientation: landscape ){

/* This is the css code that matches the landscape screen */
Body {

}
}
@ Media all and (orientation: portrait ){

/* This is the css code that matches the portrait status */
Body {

}
}

3. Application location

(1) The content of the mobile WEB page is generally defined by percentage, so that the content can be displayed normally under different resolution devices, however, the screen resolution width and height of a mobile device are quite different. When the screen is flipped over, the width of the elements defined by the percentage may become very large, in this way, the page aesthetics will be lost. In this way, if orientation matches the screen flip status, you can write different css to control the page style.

(2) For mobile WEB pages with background images, you can set different background based on orientation to match the screen status.

(3) A little technical: some WEB pages with absolute positioning elements locate an element at the bottom of the page. When the screen is in the portrait status, it may be because the total length of the page is smaller than the screen height (but greater than the screen width), it is correct to position the absolute positioning element to the bottom, but when the screen is turned into a horizontal screen, in this case, because the page content height is greater than the screen height (that is, the screen width when the page is not flipped), the absolute positioning element will overwrite the page content, resulting in page problems. In this case, orientation can be used to match the screen status, adjust the css code.

You can also use JS to determine the status of the matching screen. In js, onorientationchange is an event of window. You can monitor the event to match the screen landscape and landscape.