Responsive notes (1)

Media enquiries: Media queries allow us to set CSS styles based on the features of the device display (such as viewport width, screen scale, device orientation: Landscape or portrait), and media queries consist of media types and one or more conditional expressions that detect media characteristics.

Grammar

1{2    css-code; 3 }

Instance

Modify the background color (background-color) If the document width is less than 300 pixels:

1{2    body {3        background-color:lightblue;  4     }5}

Keywords include and-with, or (comma)-or, not-non, only
Not only valid to comma location
Only old browsers resolve to @media All/scree/print, the following conditions will be ignored, when applying media queries against a device, it is best to bring only

4 most commonly used media properties to add min-or max-prefixes

1.width: Viewport width
2.height: Viewport Height
3.device-width: The width of the rendered surface, which is the width of the device screen
4.device-height: The height of the rendered surface, which is the height of the device screen

Two, the viewport (viewport)

• Layout viewport (layouts viewport): First use a virtual width to layout the page, the viewport size does not change
• Visual viewport (visual Viewport): The width displayed on the phone, the user's zoom can change its size
• Ideal viewport (ideal viewport): refers to the optimal size of the layout viewport on one device
• Ideal viewport (ideal viewport): refers to the optimal size of the layout viewport on one device

Example: Book layout viewport, mobile phone like magnifying glass can enlarge the part of the book, mobile phone screen is a visual viewport

How to use the ideal viewport:

<name= "Viewport"  content= "Width=device-width"> 

Three, responsive web design principles

1. Progressive enhancement and graceful downgrade

Progressive Enhancement Progressive enhancement: first simple effect, and then gradually add effect according to different browser resolution

Graceful downgrade greceful degradation: The first elegant effect, in accordance with different browser different resolution gradually reduce the effect.

Elegant downgrade better, for the user experience, the idea is to let the old browser can be used, the new browser experience better

2, according to user use ratio to determine the size of the screen implementation sequence

3, the choice of breakpoints

• Small screen: 0-480px
• Medium screen: 481-800px
• Big screen: 801-1400px
• Giant screen: 1400+px

Responsive notes (1)