Point Point of responsive design

Mobile web has become a trend, the share of the rapid increase. Responsive design may be a good choice if you don't have enough time and energy to do a completely new mobile program. However, if there are conditions and need mobile Web pages, many of the advantages of the mobile side is irreplaceable, such as the positioning function.

Responsive design enables the use of the same website to be displayed perfectly on smartphones, computers and other devices. It can be based on the user's screen size, reasonable for the present and future equipment to provide a good browsing experience.

Viewport

Viewport refers to the content area within the browser window, which is the area that the page actually displays, and the screen size refers to the physical display area of the device. You can prevent the browser from automatically resizing the page:

<meta name= "viewport" content= "Width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, User-scalable=no ">

Generally, however, users are not prevented from manually scaling page sizes.

Media-query

Media query can customize the display for specific output devices. has been heavily supported by many browsers. You can also use respond.js this polyfill in unsupported browser ie6-8.

Some examples:

<Linkrel= "stylesheet"Media= "screen and (max-width:600px)"href= "Small.css"type= "Text/css" /><Linkrel= "stylesheet"Media= "screen and (min-width:900px)"href= "Big.css"type= "Text/css"  /><Linkrel= "stylesheet"Media= "screen and (min-width:600px) and (max-width:900px)"href= "Style.css"type= "Text/css" /><Linkrel= "stylesheet"Media= "screen and (max-device-width:480px)"href= "Iphone.css"type= "Text/css" /><Linkrel= "stylesheet"Media= "Not print and (max-width:1200px)"href= "Print.css"type= "Text/css" /><Linkrel= "stylesheet"type= "Text/css"href= "Style.css"Media= "handheld and (max-width:480px), screen and (min-width:960px)" />

If you want to reduce the request, you can cascade using the inline media query:

@media screen and (max-width:240px) {    

When adapting to devices of different resolutions, the content should be prioritized and laid out in accordance with this principle.

Flow Layout

Media query allows you to load different CSS for devices of different resolutions, but it still needs to be in a lot of situations and may not be ideal for some resolutions. Flow layout, which is laid out in relative units and percentages.

The conversion method with absolute units is the target size/context dimension = value.

A simple example:

If you want to set the maximum width and minimum width, the max-width and min-width,ie7+ of the specified element are supported.

That's all, come on, cheer up!

Point Point of responsive design