CSS3-Response Design Media queries template

CSS3 Media Queries Template

CSS3 Media queries generally use the "Max-width" and "Min-width" two properties to check the resolution size of various devices and the conditions set by the style sheet, and call the appropriate style if satisfied. For example, if your Web page in the 960px screen display, then first through the CSS3 Media queries query to see if there is a set of this condition style, if found corresponding, will adopt the corresponding style, the other equipment is the same reason. Here's a look at the "Max-width" and "Min-width" templates:

Using Max-width

@media screen and (max-width:600px) {
Your style is put here ....
}
Using Min-width

@media screen and (min-width:900px) {
Your style is put here ...
}
Mixed use of max-width and Min-width

@media screen and (min-width:600px) and (max-width:900px) {
Your style is put here ...
}
At the same time CSS3 Media queries can also query the width of the device "Device-width" to determine the style of call, this is mainly used in iphone,ipads devices, such as the following application:

iphone and smartphones on the application

* * IPhone and Smartphones (portrait and Landscape)
@media screen and (min-device-width:320px) and (max-device-width:480px) {
Your style is put here ...
}
Max-device-width refers to the entire render area width of the device (the actual width of the device)

On the application of ipads

/* IPads (Landscape) * *
@media screen and (min-device-width:768px) and (max-device-width:1024px) and (Orientation:landscape) {
Your style is put here ...
}
/* IPads (Portrait) * *
@media screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) {
Your style is put here ...
}
For mobile devices, if you want the style to work better, you need to add a meta tag for "viewport":

<meta name= "viewport" content= "width=device-width, initial-scale=1.0"/>
Calling a separate style sheet

You may want to cut down on different devices using different style files for ease of management or maintenance, so you can invoke this in the following way:

<link rel= "stylesheet" media= "screen and (min-device-width:320px) and (max-device-width:480px)" href= "Iphone.css"/ >
<link rel= "stylesheet" media= "screen and (min-device-width:768px) and (max-device-width:1024px)" href= "Ipad.css"/& Gt
The use of CSS3 Media queries on standard equipment

Let's take a look at the use of CSS3 Meida queries on standard equipment, you can add these styles to your style file, or create a separate file called "Responsive.css" and write your style in the appropriate conditions to suit your design needs:

1, 1024px display screen

@media screen and (max-width:1024px) {
/* CSS Styles * *
}
2, 800px display screen

@media screen and (max-width:800px) {
/* CSS Styles * *
}
3, 640px display screen

@media screen and (max-width:640px) {
/* CSS Styles * *
}
4, the ipad horizontal panel display screen
@media screen and (max-device-width:1024px) and (Orientation:landscape) {
/* CSS Styles * *
}
5, the ipad vertical Board display screen

@media screen and (max-device-width:768px) and (orientation:portrait) {
/* CSS Styles * *
}
IPhone and Smartphones

@media screen and (min-device-width:320px) and (min-device-width:480px) {
/* CSS Styles * *
}
There is now a fairly mature application for this, and the use of this is added to the second version of Twitter's bootstrap. We can compare:

Landscape phones and down
@media (max-width:480px) {...}

Landscape Phone to portrait tablet
@media (max-width:768px) {...}

Portrait tablet to landscape and desktop
@media (min-width:768px) and (max-width:980px) {...}

Large Desktop
@media (min-width:1200px) {..}
In the bootstrap of the responsive.css using grid layout, you can go to the official website to view or download its source code for learning. In addition for everyone to provide a adapt.js also very convenient to help everyone achieve the above effect. Interested students can go to understand the understanding.

1, Smartphones (portrait and Landscape)

@media only screen and (min-device-width:320px) and (max-device-width:480px) {
* Styles * *
}
2, Smartphones (landscape)

@media only screen and (min-width:321px) {
* Styles * *
}
3, Smartphones (portrait)

@media only screen and (max-width:320px) {
* Styles * *
}
4, IPads (Portrait and Landscape)

@media only screen and (min-device-width:768px) and (max-device-width:1024px) {
* Styles * *
}
5, IPads (Landscape)

@media only screens and (min-device-width:768px) and (max-device-width:1024px) and (Orientation:landscape) {
* Styles * *
}
6, IPads (Portrait)

@media only screens and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) {
* Styles * *
}
7, IPhone 4

@media only screens and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {
* Styles * *
}
8, 640px display screen

@media screen and (max-width:640px) {
/* CSS Styles * *
}
9, 800px display screen

@media screen and (max-width:800px) {
/* CSS Styles * *
}
10, 1024 display screen

@media screen and (max-width:1024px) {
/* CSS Styles * *
}
11, desktops and laptops

@media only screen and (min-width:1224px) {
* Styles * *
}
12, Large Screens

@media only screen and (min-width:1824px) {
* Styles * *
}
So the relevant introduction to the CSS3 Media queries template is here, and finally I hope you like it. If you find this article helpful or useful, you can recommend it to your friends, and if you have a better share, you can share your experience directly with us in the comments below.

Latest update Template

@media only screen and (min-width:320px) {

/* Small screen, Non-retina * *

}

@media
Only screen and (-webkit-min-device-pixel-ratio:2) and (min-width:320px),
Only screen and (Min--moz-device-pixel-ratio:2) and (min-width:320px),
Only screen and (-O-MIN-DEVICE-PIXEL-RATIO:2/1) and (min-width:320px),
Only screen and (Min-device-pixel-ratio:2) and (min-width:320px),
Only screen and (min-resolution:192dpi) and (min-width:320px),
Only screens and (MIN-RESOLUTION:2DPPX) and (min-width:320px) {

/* Small screen, retina, stuff to override above media query * *

}

@media only screen and (min-width:700px) {

/* Medium screen, Non-retina * *

}

@media
Only screen and (-webkit-min-device-pixel-ratio:2) and (min-width:700px),
Only screen and (Min--moz-device-pixel-ratio:2) and (min-width:700px),
Only screen and (-O-MIN-DEVICE-PIXEL-RATIO:2/1) and (min-width:700px),
Only screen and (Min-device-pixel-ratio:2) and (min-width:700px),
Only screen and (min-resolution:192dpi) and (min-width:700px),
Only screens and (MIN-RESOLUTION:2DPPX) and (min-width:700px) {

/* Medium screen, retina, stuff to override above media query * *

}

@media only screen and (min-width:1300px) {

/* Large screen, Non-retina * *

}

@media
Only screen and (-webkit-min-device-pixel-ratio:2) and (min-width:1300px),
Only screen and (Min--moz-device-pixel-ratio:2) and (min-width:1300px),
Only screen and (-O-MIN-DEVICE-PIXEL-RATIO:2/1) and (min-width:1300px),
Only screen and (Min-device-pixel-ratio:2) and (min-width:1300px),
Only screen and (min-resolution:192dpi) and (min-width:1300px),
Only screens and (MIN-RESOLUTION:2DPPX) and (min-width:1300px) {

/* Large screen, retina, stuff to override above media query * *

}

Don't only keyword in media query

Today, a group of friends asked @media only in screen and (min-width:320px) what the meaning of only, looked up some information.

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:

Media_type	Device type description
All	All devices
Aural	Hearing Equipment
Braille	Braille Tactile Devices
Handled	Portable devices, such as mobile phones, tablet computers
Print	Print Preview diagram
Projection	Projection equipment
Screen	Monitors, notebooks, mobile terminals and other devices
Tty	Equipment such as typewriters or terminals
Tv	TV and other types of equipment
Embossed	Braille Printer

Examples of implementing responsive web design

First step: Meta tags (view demo)
Most mobile browsers enlarge the HTML page to a wide view (viewport) to match the screen resolution. You can use the META tag of the view to reset it. The following View tab tells the browser that the width of the device is used as the width of the view and prevents the initial scaling. Add this meta tag to the tag.

<meta name= "viewport" content= "width=device-width, initial-scale=1.0"/>
Media Query is not supported by IE8 or earlier browsers. You can use Media-queries.js or respond.js to add media query support for IE.

<!--[If Lt IE 9]>
<script src= "Http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js" ></script>
<! [endif]-->
Step Two: HTML structure

In this example, I have a basic page layout that includes the header, content, sidebar, and footer. The head has a fixed height of 180 pixels, the content container is 600 pixels and the sidebar is 300 pixels.

Step three: Media inquiry-media Queries
CSS3 Media query-Medium query is the core of responsive design. It tells the browser how to render the page for the specified view width, depending on the criteria.
The following rules take effect when the view width is less than or equal to 980 pixels. Basically, I set all container widths from pixel values to percentages to make the container size adaptive.

Then specify the width of the #content and #sidebar to be adaptive and clear the float for a view that is less than or equal to 700 pixels, so that the containers are displayed in full width.

For situations that are less than 480 pixels (mobile screen), set the height of the #header element to adaptive, modify the H1 font size to 24 pixels, and hide the sidebar.

You can add enough media enquiries to your liking. I only showed 3 media queries in the example. The purpose of a media query is to specify different CSS rules for the specified view width to achieve a different layout. Media queries can be written in the same or separate style sheet.