we can prepare for specialized equipment

fertieg97

To test the Media Queries on different devices is not easy, you need to have a variety of devices, but also the code uploaded to a host computer to access the test. Here is an online service, ProtoFluid, the service allows you to provide your web site to test the URL, or on your local URL, and then simulate the iPhone and other mobile devices to display your design, the next figure is the above mentioned dConstruct site Simulation in ProtoFluid the iPhone display look. You can also fill out your own window size to simulate a specific device.
To make this layout better on the phone display, we design a mobile phone version of a column layout, and reduce the header part of the image size.
order to adapt to mobile devices, will use the Media Queries load separate style sheets:
Finally, we get a small screen device displays the following results:
Jon Hicks on Media Queries in Hicksdesign achieve a very good browsing experience, not only for mobile devices, but also for those with small screen desktop system. You can also take a look at Simon Collison's website, and Ed Merritt's portfolio of these sites use this technology.
test the iPhone
     of the browser window width and height
     device width and height
     handheld device direction, horizontal or vertical
     resolution
then compact some of
single row layout
<h2 class=\
If you have a support Media Queries device, we can prepare for specialized equipment, CSS, make your site adapt to the small screen device, the British-based Web technology conference dConstruct the technology will launch their 2010 conference website , mobile phones can easily access, the following is the site of desktop and mobile version of screenshot:
The first step is to get some
in ProtoFluid use Media Queries, you'll need to add max-width and max-device-width property, which means that, Media Queires not only for different mobile devices, but also for desktop systems in some of the little man window situation.

for visitors if you are iPhone, Opera Mini and other mobile devices, this is no problem, for those who do not support Media Queries browser (like IE6/7/ Cool

,[link widoczny dla zalogowanych], the following article may help you.
Logo displayed on the screen in a small, because the Logo is based on the background image, so well done, while providing a small size of the background to and Logo with.

Rachel Andrew is a Web front-end designers and back-end developer, is a Web development consultancy edgeofmyseat.com British director, she was a designer of small Perch CMS system. She has written a number of the Web development and design-related books, including the publication by the SitePoint CSS Anthology: 101 Essential Tips,[link widoczny dla zalogowanych],Tencent QQ line buy online, Tricks and Hacks, her personal blog is rachelandrew.co.uk.
for small changes in the CSS code directly into the mobile device code branch is very convenient, but for large sites, you can use Media Queries link to a separate style sheet file to the file in a separate style sheet is completely free CSS code is written for small devices,resort cheap car dealers, as follows:

using the above code in the desktop browser, when you change the window size to reach 480 and they will see the layout change. Note that the above max-width section just to test,[link widoczny dla zalogowanych], if you do not want the user to the desktop browser, as a result of changing the window size to change your layout, you can remove the max-width part, but only for those mobile equipment.
add new style sheet
    After the mobile era Web design
     A List Apart - Responsive Web Design (ALA - responsive Web Design)
     Apple - Safari Web Content Guide (Apple - Safari Web content guidelines)
     Sitepoint CSS Reference - Media Queries (SitePoint's CSS Reference Manual - Media Queries)
     Targeting the iPhone 4 Retina Display with CSS3 Media Queries (using CSS3 Media Queries to achieve high-precision display for the iPhone 4 Design)
     Aral Balkan: How to make your web content look stunning on the iPhone 4's new Retina Display (Aral Balkan: How to Get Your iPhone 4 Web content in the high-fine screen to better display)
     Stuff and Nonsense: Proportional leading with CSS3 Media Queries (using CSS3 Media Queries to achieve proportional line spacing)
     Matthew James Taylor: iPad layout with landscape and portrait modes (iPad horizontal and vertical layout mode)
<h2 class=\
<h2 class=\

next major work is to replace the multi-column single-column layout, desktop multi-column layout using the Float, we wanted to change a single column, simply float is set to float: none, and set width width: auto,and no further distortions caused by the air, so to achieve a single layout.
<h2 class=\
Then, in the branch for the preparation of a separate CSS small screen definitions of CSS in the desktop version to cover the corresponding definition (as long as this branch of code on the back), the following CSS for the layout of the small screen into a column type, and use the small size of the Header Photo:

we give a simple example of two-column structure.

this site in different sizes for different layout on the device display and the phone version of the iPhone, Opera Mini, Android and other equipment have exactly the same performance.
Then, adjust the margin and padding to make it more compact and few:

in the iPhone when the actual test, found that the site is still in the single row layout extends outwards from the Safari developer website to find a solution, the first on the site, add a meta tag, will be the site where equipment is set to window width consistent.
     Media Queries section on When Can I Use, showing which browsers have support (Media Queries browser support case)
     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 (that do not support Media Queries browser support to achieve the Media Queries)
<h2 class=\
using Media Queries the most direct way is, in your CSS code, plus a separate code branches, as follows:
<P
<h2 class=\
times in CSS2, if you have your website designed for the print version of CSS, CSS3 Media Queries will understand the role, however, CSS3 of the Media Queries than the Media Type CSS2 more practical, in fact, CSS2 the Media Type How much equipment was not supported. CSS3 of the Media Queries can help you get the following data: