There are three ways to implement a responsive layout:
- CSS3 Media Query
- Native JS Code
- Third-party open source framework (most common with bootstrap)
CSS3--Media Query1. How media queries are implemented
Method One: Stylesheet in the style sheet:
Use @media as in:<style> tags
< style > {body{background: blue; } } </style>
Mode two:<link> label use @media
<type= "Text/css" rel= "stylesheet" href= " Xxx.css " media=" only screen and (max-width:480px) "/>
2. Discrimination
max-width min-width Browser width to determine. The PC-side browser window is adjustable and can be adapted using this property
Max-device-width Min-device-width determines the maximum width and minimum width of the device. Refers to the device's physical width
3. CSS3 Media Query Common Properties
Device-width, device-height screen width high
Width, height render window width height (browser width height)
Orientation Device Orientation
Resolution Device resolution
4. Compatibility
Ie6-8 does not support CSS3, so CSS3 Media Query is not supported
Workaround:respond.js (see Bootstrap Device compatibility solution http://getbootstrap.com/getting-started/#support)
Responsive layout (ii)--CSS3 Media Query