Load style sheets for different screens

<link href= "extra-small.css" rel= "stylesheet" media= "screen and (max-width:390px)"/>
<link href= "small.css" rel= "stylesheet" media= "screen and (min-width:391px) and (max-width:500px)"/>
<link href= "medium.css" rel= "stylesheet" media= "screen and (min-width:501px) and (max-width:767px)"/>
<link href= "large.css" rel= "stylesheet" media= "screen and (min-width:768px)"/>For each different screen, choose a different style sheet

In the responsive layout, you can discard without reservation:

First, as little as possible with insignificant div;

Second, do not use inline elements (inline);

thirdly, use JS or flash as little as possible;

Four, Discard unused absolute positioning and floating styles;

Five, discard any redundant structures and do not use the 100% setting.

Have to have, discard some of the responsive have influence of East, then what can help responsive to determine a better layout ?

First, the use of HTML5 DOCTYPE and related guidelines;

Second, Reset your style (RESET.CSS);

Thirdly, a simple semantic core layout;

Four, use simple techniques for important page elements, such as navigation menu elements.

Using these tips is nothing more than keeping your HTML simple and clean, and the key parts of your page layout (elements) do not rely too much on modern techniques, such as CSS3 effects or JS scripts.

Say so much, what kind of layout or HTML structure is simple and clean? Here we teach you a quick test method. You first ban all the styles (and information related to styles) in your page, open them in your browser, and if your content is organized and easy to read, then your structure will not go any worse.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Load style sheets for different screens