How to use CSS3 to match horizontal and vertical screens

This article mainly introduces a simple method to use CSS3 to match horizontal and vertical screens. It mainly uses the newly added @media in CSS3. Friends who need it can refer to it.

Written in the same post In one CSS

@media screen and (orientation: portrait) {   
  /*竖屏 css*/  
}    
@media screen and (orientation: landscape) {   
  /*横屏 css*/  
}

Written separately in 2 CSSs
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">

Application Place

(1) Mobile phone WEB page element content is generally defined by percentages so that it can be displayed normally on devices with different resolutions. However, However, the screen resolution width and height of mobile devices are still very different. When the same page is turned over, the width of the element defined by the percentage may become very large, which will lose the beauty of the page. In this way, if orientation matching is used Depending on the flipped state of the screen, you can write different css to control the page style.

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

(3) A slightly technical point: Some WEB pages with absolutely positioned elements position an element to the bottom of the page. When the screen is in portrait mode, it may be because the total page length is less than the screen height ( But greater than the screen width), it is correct to position the absolutely positioned element to the bottom. However, when the screen is flipped to landscape, because the page content height is greater than the screen height (that is, the screen width before flipping), the absolutely positioned element will Covering the page content will cause problems on the page. In this case, you can use orientation to match the screen status and adjust the css code.

About matching the horizontal and vertical screen status, you can also judge it through JS. Onorientationchange in JS is an event of window, and you can match the horizontal and vertical screen by listening to the event.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

CSS3 and jQuery implement the Hover effect that follows the mouse direction

##CSS table-layout attribute usage

The above is the detailed content of How to use CSS3 to match horizontal and vertical screens. For more information, please follow other related articles on the PHP Chinese website!