CSS3 Match screen All State

@media is the new definition of CSS3, the function is very powerful, the following simple to explain the CSS3 @media orientation matching phone screen is horizontal or vertical screen.

As the name suggests, the PC is unable to match the screen, so orientation only works on mobile devices.

1. Head statement
<meta name= "viewport" content= "Width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0" >

Add to

2. Media Match screen is horizontal screen or vertical screen
@media all and (Orientation:landscape) {

/* This is the matching horizontal screen of the state, horizontal screen when the CSS code * *
Body {
Background-color: #ff0000;
}
}
@media all and (orientation:portrait) {

/* This is the matching vertical screen status, the vertical screen when the CSS code * *
Body {
Background-color: #00ff00;
}
}

3. Place of application

(1) Mobile Web page element content is generally defined by the percentage, in order to be able to display under different resolution devices, although this, but the screen resolution width and height of mobile devices is still very large, the same page in the screen when the possible percentage of the definition of the element width will become very large, This will lose the appearance of the page, so that if you use orientation match the screen flip state, you can write different CSS to control the page style.

(2) for a mobile Web page with a background map, you can set up different background according to Orientation matching screen screen status.

(3) A slightly technical point: some Web pages with absolutely positioned elements, positioning an element at the bottom of the page, when the screen is in a vertical state, may be because the total length of the page is less than the screen height (but larger than the screen width), then it is correct to position the absolute positioning element to the bottom, but when the screen flips to a horizontal screen, Because the page content height is higher than the screen height (that is, the screen width is not flipped), the absolute positioning element will be covered on the page content, causing the page problems, you can use Orientation Match screen state, adjust the CSS code.

About the matching screen can also be used to determine the status of JS, JS Onorientationchange is a window event, you can monitor the event matching screen.