"Graphic CSS3" Note 5 media and responsive design

Media Type: Media Type

A property in CSS2 that specifies the type of device that the page renders, commonly used:all, screen, print (printing), and multiple device types for projection, blind

Citation method:

1. <link> Tag: attribute name media= "screen";

2. @import mode: @import URL (xx.css) screen (for: CSS file to introduce another CSS or <style> tag)

3. @media Mode: @media screen {...} (Features in CSS3)

Media query: Press queries

CSS3 attribute, added new rule: Based on media type + CSS attribute rule definition

How to use:

1. <link> label <link media= "screen and (MIN-WIDTH:XXXPX)" >

2. Text mode: @media screen and (Min-width:xxxpx) {...}

An expression supports the following keywords:

Not

Only

The characteristics of responsive design: Grid layout (flexible layout), elastic image, flexible style

Content property values for viewport viewport in meta Tags: <meta name= "viewport" content= "..." >

Width=device-width, initial-scale=1.0, User-scalable=no

"Graphic CSS3" Note 5 media and responsive design