A method of matching horizontal screen vertical screen using CSS3

This article mainly introduces the use of CSS3 to match the horizontal screen vertical screen of the simple method, mainly used to CSS3 in the newly added @media, the need for friends can refer to the next

written in the same CSS

@media screen and (orientation:portrait) {/     * portrait css*/  }    @media screens and (Orientation:landscape) {/     * horizontal Screen css*/  }

Write separately in 2 CSS
Vertical screen

<link rel= "stylesheet" media= "All and (orientation:portrait)" href= "Portrait.css" >

Horizontal screen

<link rel= "stylesheet" media= "All and (Orientation:landscape)" href= "Landscape.css" >

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 and screen status can also be JS judge, JS Onorientationchange is a window event, you can listen to the event to match screen.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!