CSS3 Media Query: The perfect beginning of the mobile web

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:

1. Width and height of the browser window

2. Equipment width and height

3. The handheld direction of the equipment, horizontal or vertical

4. 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.