CSS3 Media queries Template: Max

Article Introduction: First of all, in the article "CSS3 Media Queries" to explore the CSS3 media types and media characteristics of the relevant applications.

First of all, in the article "CSS3 media Queries" to explore the CSS3 media types and media characteristics of the relevant applications. The simple idea is to use this style that can be displayed differently on a variety of devices.

From these articles, you can know that in the design of Responsiv, CSS3 Media is playing a very important role, it can be said that there is no CSS3 media this attribute, Responsiv design is not to play, but also do not turn. We all know that Responsiv is designed for a variety of different devices, but there is a problem that you may still be in a vague state, this CSS3 media to how to set their own critical points?

So today we're going to take a look at the above questions and discuss CSS3 Media queries in a variety of different devices (desktop, mobile, notebook, iOS, etc.) template production. So how does media queries work? So about his working principles, if you are interested in the word "CSS3 Media Queries" A text, which has been done in detail, here is not to do too much elaboration.

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 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-wid th: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 here ... 		} 		/* IPads (Portrait) */@media screen and ( 		min-device-width:768px) and (max-device-width:1024px) and (orientation : Portrait) { 			//Your style is here ... 		} 	

For mobile devices, if you want the style to work properly, you need to add "viewport" meta tags to "":

There is an introduction to this aspect you can look at this blog on the development of the mobile end of the relevant summary.

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:

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. Another 960gs for everyone to provide a adapt.js is also very convenient to help everyone achieve the above effect. Interested students can go to understand the understanding.

below to provide you with a few cases in this regard, for your reference:

1. "CSS3 Media queries case--hicksdesign"
2. "CSS3 Media queries case--tee Gallery"
3. "CSS3 Media queries case--a List Apart"

Update CSS3 Media queries template query

1, Smartphones (portrait and Landscape)

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

2, Smartphones (landscape)

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

3, Smartphones (portrait)

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

4, IPads (Portrait and Landscape)

@media only screen and (min-device-width:768px) and (max-device-width:1024px) { 	

5, IPads (Landscape)

@media only screens and (min-device-width:768px) and (max-device-width:1024px) and (Orientation:landscape) { 	

6, IPads (Portrait)

@media only screens and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) { 	

7, IPhone 4

@media only screens and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) { 	

8, 640px display screen

@media screen and (max-width:640px) { 	

9, 800px display screen

@media screen and (max-width:800px) { 	

10, 1024 display screen

@media screen and (max-width:1024px) { 	

11, desktops and laptops

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

12, Large Screens

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

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.

Updated October 09, 2012

@media only screen and (min-width:320px) {/* Small screen, Non-retina/} @media only screens and (-webkit-min-devi Ce-pixel-ratio:2) and (min-width:320px), only screens and (Min--moz-device-pixel-ratio:2) and (Min-width:3 20px), only screens and (-O-MIN-DEVICE-PIXEL-RATIO:2/1) and (min-width:320px), only the screen and (Min-devic E-pixel-ratio:2) and (min-width:320px), only screens and (min-resolution:192dpi) and (min-width:32  0px), only screens and (MIN-RESOLUTION:2DPPX) and (min-width:320px) {/* Small screen, retina, stuff To override above media query/} @media only screens and (min-width:700px) {/* Medium screen, Non-retina/} @ Media only screens and (-webkit-min-device-pixel-ratio:2) and (min-width:700px), only the screen and (Min--moz-device -pixel-ratio:2) and (min-width:700px), only screens and (-O-MIN-DEVICE-PIXEL-RATIO:2/1) and (min-width:700  PX), only the screen and (      Min-device-pixel-ratio:2) and (min-width:700px), only screens and (min-resolution:192dpi) and (min-width:700px), only screens and (MIN-RESOLUTION:2DPPX) and (min-width:700px) {/* Medium scree N, retina, stuff to override above media query/} @media only screens and (min-width:1300px) {/* Large screen, non   -retina/} @media only screens and (-webkit-min-device-pixel-ratio:2) and (min-width:1300px), only the screen and ( Min--moz-device-pixel-ratio:2) and (min-width:1300px), only screen and (-O-MIN-DEVICE-PIXEL-RATIO:2/1) a nd (min-width:1300px), only screens and (Min-device-pixel-ratio:2) and (min-width:1300px), only the screen and  (min-resolution:192dpi) and (min-width:1300px), only screen and (MIN-RESOLUTION:2DPPX)   and (min-width:1300px) {/* Large screen, retina, stuff to override above media query */}