Heart response to distal note page layout --------

What is responsive design

Make a website different resolutions compatible devices

Give users a better visual experience

 

Background birth

Multi-display mobile Internet terminal

Mobile Internet trapolation birth responsive layouts

 

Responsive design advantages and disadvantages

Advantages: solve the differentiation of display equipment saw

Cons: multi-code compatibility, workload, affected by loading speed

Layout will have an impact on the original site, the user may not accurately judge

 

 

Principles of responsive design

Mobile Priority: How a page to be considered early in the design of the multi-display terminal

Progressive enhancement: give full play to the maximum hardware features

 

 

How responsive layout

CSS3-Media Qjuery (the easiest way)

With native Javascript (high cost, not recommended)

Third party open source framework (can be well supported browser responsive design layout)

 

 

CSS-Media Query

Common attributes:

device-width, device-height width and height of the screen

width, height rendering the window width and height

direction orientation device

resolution device resolution

Code is as follows:

<style>
            @media  screen and (max-width:600px ) {
                body{background: blanchedalmond;}
            }
            @media  screen and (min-width: 100px) and (max-width: 640px) {
                body{background: red;}
            }
            @media  screen and (min-width:1001px ) {
                body{background: wheat;}    
            }    
        </style>

 

Third-party plug-ins: responsive layouts  Bootstrap