Media query in CSS3, CSS3media

Media query in CSS3, CSS3media

In the past few days, I have read in detail the CSS3 of MOOC,
Address here: http://www.imooc.com/code/1405

Take notes:
1. media query in css3 1. 10 media query types in CSS3 value device types
All devices (familiar)
Screen Display (familiar)
Print paper or print preview view (familiar)
Braille tactile feedback device for blind people
Embossed Braille printer
Handheld portable device
Projection various projection Devices
Speech or audio Synthesizer
TV Devices
Tty uses fixed-density letter raster media, such as telex typewriters and Terminals

2. Common reference methods for three media types ① link Method

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

② @ Import Method

@importurl(reset.css) screen;   

③ @ Media Method

<Style type = "text/css"> @ media screen {selector {/* write your style code here... * // }}</Style>

3. How to use media query @ media type and (media features) {your style}


Media type: the 10 types mentioned above
Media features: max-width: 400px maximum width
Min-width: 400px min width
...

① Use of multiple media features

/* Connect with and */@ media screen and (min-width: 600px) and (max-width: 900px) {body {background-color: # f5f5f5 ;}}

② Exclude a device

/* Use not */@ media not print and (max-width: pixel px) {style code}/* The code above indicates: the style code is used on all devices except printing devices and devices whose width is less than pixel PX. */

③ Only used on a device

/* Use only */<linkrel = "stylesheet" media = "only screen and (max-device-width: 240px)" href = "android240.css"/>

2. layout skills in responsive Design 1. Use as few irrelevant div as possible;
Second, do not use inline elements (inline );
Third, use JS or flash as little as possible;
Fourth, discard useless absolute positioning and floating styles;
Fifth, discard any redundant structure and do not use the 100% setting.
Sixth, try to use H5 meaningful labels


The layout or HTML structure is simple and clean.
? Here is a quick test method.
You first disable all styles on your page (and
In the browser, if your
This structure is organized and easy to read.
It will not make any difference.