CSS to judge the use of adaptive width &CSS3 @media style using different resolution display different width layout

CSS to judge different resolution display different width layout to achieve adaptive width that is CSS3 @media style of use

From: Script Home "CSS judge different resolution display different width layout realize adaptive width" http://www.jb51.net/css/151312.html

CSS to determine different resolution browsers (display screens) display different width
layouts CSS3 technical support IE6 to IE8.
will use the CSS3 @media style to judge,
but IE9 the following version does not support CSS3 technology,
here DIVCSS5 to introduce you through JS to achieve a lower version of the
browser also support CSS3 implementation of the practical layout

CSS Div Page Layout When the resolution is less than or equal to 1024px (pixels), the div layout object displays the 1000px width, and when the resolution is greater than 1024px, the demand for the 1200px width is displayed. Using CSS to change the width of the browser to achieve the layout of the Web page to change the width of the dynamic changes (Web page width automatically with the browser width and narrowing).

With the development, more and more computer User display screen resolution is higher, but some users still use 1024px resolution of the display (according to several browser resolution statistics platform to get data now using 1200 resolution of the following users very little, However, we still need to consider the CSS layout of the user at least 1024px resolution, if the page layout width fixed to the 1200px,1024 resolution user browsing the Web browser will appear under the scroll bar, in order to solve this problem, You can call different layout widths by using the CSS3 style to determine the width of the user's browser.

Using CSS words and grammar

Copy code code as follows:

@media screen and (Judge property) {CSS style selector}
Notice here that the curly braces are loaded to change the CSS style selector.
Three, different resolution display different width style case

1, divcss small case Description

We first set a div box css named ". ABC", set its height to 300px,css border to black, and set the margin:0 auto layout centered. These two styles are preset for easy observation.
By manually dragging the browser to display the width, and then observe the box width changes, when the browser width is not more than 500px width, corresponding to this box width display 100px, adjust browser width is not more than 901px, display ". abc" corresponding box width display 200px; When the width of the browser is greater than 1201px, the width of the box object is 1200px, and the width is 900px when less than 1200px.

2, CSS code

Copy code code as follows:

. abc{height:300px border:1px solid #000 margin:0 Auto} @media screen and 
(min-width:1201px) { 
. ABC {width:120 0px} 
} 

@media screen and (max-width:1200px) { 
. ABC {width:900px} 
}} 

@media screen and (max-width:901px) { 
. ABC {width:200px}} 
} 

@media screen and (max-width:500px) { 
. ABC {width:100px}} 
} 

Need attention is the CSS code order, from large to small typesetting css (the larger the browser to determine the width of the former), this is because of the logic of the relationship, @media to judge CSS errors will lead to judgment failure.

3, HTML code

Copy code code as follows:

<! DOCTYPE html> 
 
4, in order to compatible IE9 the following version of the browser needs to add a Google JS, of course, can download the misleading HTML

Copy code code as follows:

**

<! DOCTYPE html> 
 
using @media screen to customize the layout of Web pages, @media screen and 
Transferred from http://www.cnblogs.com/mofish/archive/2012/05/23/2515218.html

To start researching responsive web design, CSS3 Media queries is an introduction.
Media Queries to apply a different style sheet by allowing an expression to be added to determine the environment of the media. In other words, it allows us to change the layout of the page without changing the content in order to accurately adapt to different devices.
So, how does Media queries work.
Two ways:

one is to determine the size of a device directly in link, and then refer to a different CSS file:

<link rel= "stylesheet" type= "Text/css" href= "stylea.css" media= "screen and (min-width:400px)" >
 
It means that when the width of the screen is greater than 400px, the application of STYLEA.CSS
In Media properties:
Screen is one of the media types, and CSS2.1 defines 10 types of media
and is called a keyword, and other keywords include not (excluding some device), only (qualifying some device)
(min-width:400px) is the media feature, which is placed in a pair of parentheses.

<link rel= "stylesheet" type= "Text/css" href= "Styleb.css" "media=" screen and  (min-width:600px) and (max-width: 800px) ">
 
This means that when the screen width is greater than 600 or less than 800, the application styleb.css

another way, which is directly written in the

@media the screen and (max-width:600px) {/* When the on-screen size is less than 600px, apply the following CSS style *
  /. Class {
    background: #ccc;
  }
}
 
The writing is the front plus @media, the other is the same as the media attribute in link.
In fact, basically is the style overlay ~, judge the device, and then refer to different style file overlay.
Note that because the page adjusts the layout according to the screen width, you cannot use an absolute width layout, and you cannot use an element with an absolute width. This is very important, otherwise a horizontal scroll bar will appear.

Add: Don't only keywords in media query
Not:not is used to exclude certain devices, such as @media not print (nonprinting devices)
Only: Used to set a particular type of media. For mobile devices that support media queries, if the only keyword exists, the mobile device's Web browser ignores the only keyword and applies the style file directly to the subsequent expression. For a Web browser that does not support media queries but is able to read the media type type, this style file is ignored when the only keyword is encountered.
All: All devices, this should often be seen
There are other things:


Here's the demo.
A three-column layout, in different sizes, into two columns, and then into a column

Code:

<! DOCTYPE html>