To get a thorough understanding of CSS3 's media Queries

Web page Production WEBJX article introduction: CSS3 Media Queries: Perfect solution for Web and mobile cross-platform design.

Mobile era, is any WEB design and developers can not ignore an era, one day, the things you design will be displayed on two screens, the desktop big screen and the mobile small screen, how to get the same site to adapt to the two completely different sizes of the screen, this is a long time there is no perfect solution to the problem, Until there was a CSS3.

CSS3 's Media Queries

In the CSS2 era, if you've ever designed a print version of CSS for your site, you'll understand the role of CSS3 media Queries, but CSS3 media Queries is more practical than CSS2 's media Type, in fact, CSS2 Medi A TYPE has not been supported by many devices. CSS3 Media Queries can help you get the following data:

• Width and height of the browser window
• Width and height of equipment
• The handheld direction of the device, horizontal or vertical
• Resolution

If the user has a device that supports Media Queries, we can write a special CSS for the device, so that the Web site adapt to the small screen of this device, the British WEB Technology conference DCONSTRUCT based on the technology to launch their 2010-year conference website, mobile phone can also be easily accessible, The following is a screenshot of the website's desktop and mobile version:

The site is displayed in different layouts on different sizes of devices, and the mobile version has a consistent performance in Iphone,opera Mini, Android and other devices.

Use Media Queries to create a separate CSS for your phone

Let's give an example of a simple two-column structure.

To make this layout more visible on the phone, we design a one-column layout for the mobile version and reduce the size of the header portion of the picture.

The most direct way to use Media Queries is to add a separate branch of code to your CSS code, as follows:

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

}

Code hosted by Snipt.net

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

}

Then, in this branch, a separate CSS definition is written for the small screen that overrides the corresponding definition in the desktop version of CSS (as long as the branch code is placed behind), the following CSS for the small screen becomes a column and uses a small Header image:

@media only screen and
		(max-device-width:
		480px)
		{
	div#wrapper
		{
		width:
		400px;
	}

	Div#header
		{
		background-image:
		url (media-queries-phone.jpg);
		Height:
		93px;
		Position:
		relative;
	}

	Div#header
		H1
		{
		font-size:
		140%;
	}

	#content
		{
		float:
		none;
		Width:
		100%;
	}

	#navigation
		{
		float:none;
		Width:
		auto;
	}

Code hosted by Snipt.net

@media only screen and
		(max-device-width:
		480px)
		{
	div#wrapper
		{
		Width:
		400px;
	}

	Div#header
		{
		background-image:
		url (media-queries-phone.jpg);
		Height:
		93px;
		Position:
		relative;
	}

	Div#header
		H1
		{
		font-size:
		140%;
	}

	#content
		{
		float:
		none;
		Width:
		100%;
	}

	#navigation
		{
		float:none;
		Width:
		auto;
	}

In the end, we get the following display on a small screen device:

For small changes, it is convenient to insert mobile device code branches directly into CSS code, but for large sites, you can use media Queries to link Independent Model table files so that you can completely freely write CSS code for small devices in a separate model table file, as follows:

 <link rel= "stylesheet" type= "Text/css" media= "only" (max-device-width:480px) "href=" small-device.css/> 

code hosted by Snipt.net

 <link rel= "Stylesh EET "type=" Text/css "media=" only screens and (max-device-width:480px) href= "Small-device.css"/> 

Test Media Queries

It's not easy to test Media Queries on different devices, you have to have a variety of devices, and you have to upload the code to a host for access testing. Here is an online service, Protofluid, which allows you to provide the URL of the site you want to test, or the URL on your computer, and then the analog IPhone and other mobile devices display your design, the following figure is the Dconstruct site mentioned above in Protofluid The look in the IPhone simulation. You can also fill in your own window size to simulate a particular device.

In Protofluid using media Queries, you need to add both the max-width and Max-device-width attributes, which means that media queires can not only target different mobile devices, You can also target some man-made small window situations in your desktop system.

@media only screens and (max-width:480px), only screen and (max-device-width:480px) {

}

Code hosted by Snipt.net

@media only screens and (max-width:480px), only screen and (max-device-width:480px) {

}

Using the above code, on the desktop browser, when you change the window size to reach 480 pixels, you will see the layout changes. Note that the Max-width section above is just for testing, and if you don't want the user to change the size of the window in the desktop browser, you can remove the max-width part and only the mobile device.

The rectification of the existing website

The above example is very simple to illustrate the problem, the real site is not possible, the following example, the author will use his own company web site to explain how to use Media Queries to the existing site to move the rectification.

Desktop layout

The author's own website was designed a few years ago, which is not yet considered Media Queries problem, this is a three-column layout.

Add a new model sheet

To accommodate mobile devices, you will use Media Queries to load the standalone model table:

<link 
rel= "stylesheet" type= "Text/css" media= "only screens 
and (max-width:480px), only the screen and ( max-device-width:480px) " 
href="/assets/css/small-device.css " 
/>

Code hosted by Snipt.net

<link 
rel= "stylesheet" type= "Text/css" media= "only screens 
and (max-width:480px), only the screen and ( max-device-width:480px) " 
href="/assets/css/small-device.css " 
/>

The author's approach is to save his site in the original CSS file as Small-device.css, on this basis for mobile devices to rectify.

Compress Header Section

The first step is to let the logo part can be displayed on the small screen, because the logo is based on the background image, so it is good to do, at the same time, provide a small size of the background map to match with the logo.

Body {
	Background-image:url (/img/small-bg.png);
}

#wrapper {
	width:auto;
	Margin:auto;
	Text-align:left;
	Background-image:url (/img/small-logo.png);
	Background-position:left 5px;
	Background-repeat:no-repeat;
	min-height:400px;
}

Code hosted by Snipt.net

Body {
	Background-image:url (/img/small-bg.png);
}

#wrapper {
	width:auto;
	Margin:auto;
	Text-align:left;
	Background-image:url (/img/small-logo.png);
	Background-position:left 5px;
	Background-repeat:no-repeat;
	min-height:400px;
}

Single-Column layout

The next major task is to change the multi-column layout into a single column, the desktop version using Float to achieve the layout of multiple columns, to be changed to a single column, just set the Float to Float:none, and the width set to Width:auto, so that the implementation of a single column of the layout.

. Article #aside {
	float:none;
	Width:auto;
}

Code hosted by Snipt.net

. Article #aside {
	float:none;
	Width:auto;
}

A little more compact.

Then, margin and padding are adjusted to make them more compact:

Testing in the IPhone

The actual test in the IPhone, found that the site in a single-column layout still extends outward, from Safari Developer website Find a solution, in the site header, add a meta tag, the site's window width set to what device consistent.

<meta
		name= "viewport"
		content= "width=device-width"
		/>

Code hosted by Snipt.net

<meta
		name= "viewport"
		content= "width=device-width"
		/>