Mobile phone horizontal screen vertical screen CSS

@media is a new definition in CSS3, the function is very powerful, as the name implies that the PC is unable to match the screen, so orientation only for mobile devices.

1. Head declaration

Copy CodeThe code is as follows:
<meta name= "viewport" content= "Width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0" >

Added to

Copy CodeThe code is as follows:

2. Media Match screen is horizontal screen or vertical screen

Copy CodeThe code is as follows:
@media all and (Orientation:landscape) {</p> <p>/* This is the state of the horizontal screen, CSS code at the horizontal screen */
Body {

}
}
@media all and (orientation:portrait) {</p> <p>/* This is the state of the vertical screen, the CSS code at the vertical screen */
Body {
Background-color: #00ff00;
}
}

3. Where to apply

(1) Mobile Web page element content is generally defined by a percentage, so that it can be displayed under different resolution devices, although this, but mobile device screen resolution width and height difference is still very large, the same page can be flipped over the screen may be a percentage of the width of the element will become very large, This will lose the aesthetics of the page, so that if you use orientation to match the flip state of the screen, you can write different CSS to control the page style.

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

(3) Slightly technical point: some have absolutely positioned elements of the Web page, the element is positioned to the bottom of the page, when the screen is a vertical state, it may be because the total length of the page is smaller than the screen height (but larger than the screen width), the absolute positioning element is positioned to the bottom is correct, but when the screen is flipped to At this point, because the content height of the page is larger than the screen height (that is, the screen width is not flipped), the absolute positioning element will overwrite the page content, causing the page problems, then can orientation match the screen state, adjust the CSS code.

About matching screen status can also be JS judge, JS in Onorientationchange is a window event, you can listen to events to match screen.