Use of @media

[Email protected] rules

1.1 Media Type:

all: match all devices;

handle: Matching handheld devices (small screen, monochrome, limited bandwidth);

Print: matches the screen in paged media or print preview mode;

Screen : matching Color computer screens;

Other media types are Braille(Braille tactile feedback device),embossed(Braille paging printer),projection(projector),speech(Speech synthesizer ),TTY(fixed-width character grid devices such as telephone screens), and TVs(TVS).

Learn more about the CSS2.1 standard

1.2 Common media Features:

Min-device-width and Max-device-width: match the size of the device screen;

Min-width and Max-width: matches the width of the viewport, such as the browser width;

Orientation (Value portrait and landscape): whether the matching device is a horizontal or vertical screen.

1.3 Logical operations: And , not, or

1.4 Keywords:all, only

Media Properties for 2.<link> tags

You can choose to load the style sheet by using the Media property in the link tag.

<type= "Text/css"  media= "print"  href= "Css/print _style.css "/><type=" Text/css "  Media = "screen and (max-width:568px)" href = "Css/iphone_style.css" />

3. Breakpoints

@media screen and   (max-width:640px) /* CSS Rules */}

Personally, you don't want to set a style for a particular device, but to set it up when you find the style is inappropriate.

Andriod, iOS, and Windows device media queries

Media Literacy Text

4. into Devicepixelratio:

Devicepixelratio refers to Window.devicepicelratio.

Devicepixelratio = physical pixel/device independent pixels.

Non-Retina screen device, window.devicepixelratio=1.

Actual test

4.1. Browser

The Chrome browser on my Computer (version 51.0.2704.106 m), pops up 1:

FF Browser (48.0.2):

4.2.IOS

No retinal devices were 1, and retinal devices were 2.

4.3.Android no fixed value

Summarize:

iOS device: screen.width * devicepixelratio = physical pixels.

Andriod:screen.width/devicepicelratio = device independent pixels.

Use of @media