Css3 media query: the perfect start for mobile Web

The mobile age is any web
Design and developers cannot ignore this era. One day, what you design will be displayed on two types of screens: desktop screen and mobile small screen, how to make the same website fit in two different sizes at the same time
Screen, which has not been a perfect solution for a long time until css3 is available.

Media queries of css3

In the css2 era, if you have designed a printed CSS for your website, you will understand css3 media queries.

But the media queries of css3 is more practical than the media type of css2. In fact, the media of css2
Type is not supported by many devices. The media queries of css3 can help you obtain the following data:

• Browser window width and height
• Device width and height
• The handheld direction of the device, horizontal or vertical
• Resolution

If a user has a device that supports media queries, we can write specialized CSS for the device to adapt the website to the small screen of the device.
Technical Conference dconstruct
Based on this technology, their 2010
The annual conference website can be easily accessed by mobile phones. The following are the desktop and mobile versions of the website:

A mobile version of your website "width =" 480 "Height =" 350 ">

Mobile version of your website "width =" 320 "Height =" 480 ">

The website is displayed on devices of different sizes according to different la S, and the mobile phone version is displayed on iPhone, opera Mini, and Android
And so on.

Use media queries to create separate CSS for mobile phones

Let's take a simple two-column structure example.

Mobile version of your website "width =" 480 "Height =" 305 ">

To better display the layout on the mobile phone, we designed a column layout for the mobile phone version and reduced the image size of the header part.

The most direct way to use media queries is to add an independent code branch in your CSS code, as shown below:

Mobile version of your website "width =" 320 "Height =" 480 ">

More resources

• After
  Web design in the mobile age
• A
  List apart-responsive web design (Ala-responsive web design)
• Apple
  -Safari Web Content Guide
  (Apple-Safari Web Content Guide)
• Sitepoint CSS
  Reference-media queries (sitepoint CSS Reference Manual-media queries)
• Targeting
  The iPhone 4 Retina Display with css3 media queries (using css3 Media
  Queries is designed for the iPhone 4 high-precision display)
• Aral Balkan: How to make your web
  Content look stunning on the iPhone 4's new Retina Display
  (Aral
  Balkan: How to make your web content better displayed on the iPhone 4 high-precision screen
  )
• Stuff
  And nonsense: proportional leading with css3 media queries (use css3
  Media queries achieves proportional row spacing)
• Matthew
  James Taylor: iPad layout with landscape and portrait Modes
  (IPad
  Horizontal and vertical layout mode)

Support for media queries in old browsers

If you are targeting mobile devices such as iPhone and opera Mini, this is no problem.
Browsers (such as IE6/7/8), the following articles may be helpful to you.

• Media queries section on
  When can I use, showing which browsers have support
  (Media queries
  Browser Support)
• Media queries
  Jquery plugin (only deals with max/min width) (media queries jquery plugin)
• Css3-mediaqueries-js
  -A library that aims to add media query support to non-supporting
  Browsers
  (Media queries is supported in browsers that do not support media queries)

More examples

Jon Hicks in hicksdesign
Media queries provides excellent browsing experience, not only for mobile devices, but also for desktop systems with small screens. In addition, you can also look at Simon collison's
Website
And Ed Merritt's portfolio

These websites use this technology.

Author

Rachel
Andrew

Rachel Andrew is a Web Front-end designer and backend developer. She is a British web development consultant company, edgeofmyseat.com.
Director, she is also a small CMS system perch
. She has written many books related to web development and design, including
CSS anthology published by sitepoint: 101 essential tips, tricks and
Hacks. Her personal blog is cancelandrew. co. uk.
.

International Source: smashing magazine
How
To use css3 media queries to create a mobile version of your website

Chinese translation Source:Ruishang enterprise CMS
Website content management system
Official Website