Responsive web Design-best Practices

I. Mobile First

　　Mobile phone design is usually more minimalist, from the mobile phone design to start making a simple version, with the introduction of tablet and desktop, the page slowly complex, this is an incremental process, the initial focus on the core module, the default open simple phone style, and the responsible style wrapped in media query, so will not load, So the access speed is the best

　. Content {

/*basic effects designed for mobile devices*/

}

@media screen and (min-width:400px) {

/*complicate effects for PC and etc*/

/*such as loading big image and adding mouse effects when using pc*/

}

Example: Mobile use up and down arrangement layout, this is the div itself features, do not need to set up CSS, and the computer side to set the layout

Note: It is generally recommended to use @media in existing style sheets to avoid additional HTTP requests

Breakpoints: Set breakpoints instead of devices by content, expanding the page until the original style does not meet the design, setting breakpoints at this point

two. Flexible layout, elastic media and Windows

fluid Grid Layout, with special settings for pictures, videos, flash, etc. , The simple method is naturally: max-width:100%, while taking into account the flex layout and relative size units Em,rem, the above are for the layout of

There is also a big problem is viewport, set width=device-width, can instruct the Web page and screen width to match???

　

Responsive web Design-best Practices