CSS3 Match screen All State

Source: Internet
Author: User
Tags definition
@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.



Related Article

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

11.11 Big Sale for Cloud

Get Unbeatable Offers with up to 90% Off,Oct.24-Nov.13 (UTC+8)

Get It Now >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.