Resolving multi-resolution issues with mobile Web development with @media screen

Today's mobile devices are becoming more and more rapid, and the need for mobile web development is increasing. Many big platforms, portals have launched their own mobile web site.

With the rapid development of mobile devices, mobile products have more and more screen specifications. From a few years ago the screen of the widescreen pixel, to the current 1920x1080 resolution screen. Various resolutions of the screen so that the front-end development of people complain, how to use an effective way to solve the various screen resolution of the user experience?

In Css2, there is the media type property, which is used to determine the medium. In CSS3, the media query property is added to enhance the media type property. So when the CSS3 came out, there was a new solution to the problem. The media query property is enhanced by the media type property so that media type can make conditional judgments about the output of the corresponding CSS.

How to use media query

I. Judging media types, referencing different style sheets

<link rel= "stylesheet" media= "screen and (judging condition)" herf= "The style sheet file that needs to be called"/>

The corresponding CSS file is called by setting the judging condition of the screen. This example is used for the whole page of different styles of CSS call and selection, using this method may need to create multiple copies of CSS files for a page.

Second, to determine the media type, the implementation of different CSS style properties
@media screen and (max-width:240px) {

. box{width:200px;}

. title{color:red;}

}

The above example can appear in an external style sheet and an internal style sheet. The @media screen property is directly in the stylesheet to label the event of the media type, and the judgment condition is max-width:240px in parentheses, which means that the width is greater than 240px and the style property within the curly braces is executed if it is less than 240px.

The front-end pioneer made @media screen corresponding judgment attempt, and added the function instance of @media screen on the homepage and the article List page. The judging style is written as follows:

@media screen and (min-width:1200px) {. Post_box{width:45%;float:left;}. c-con{height:140px;}}

If a user accesses a Web site using a browser with a resolution width greater than 1200px, the page is rendered in three-column mode, such as:

If the resolution is less than 1200px, the page is rendered as a two-column mode, such as:

It is suggested that when judging by the use of a style sheet, you can modify some important styles to achieve the purpose of modifying the layout.

By @media screen and width conditions, you can plan the width of the page in advance, and then set different CSS styles according to different page widths, effectively control the Web page in various resolutions of the style sheet first.

• This article fixed link: http://www.frontopen.com/1221.html
• Reprint Please specify: Taste Life August 07, 2013 in front-end pioneer published

Resolving multi-resolution issues with mobile Web development with @media screen