CSS3--Media enquiry

Media Enquiry:

1, media query advantages: Based on the device's property detection device, so that you do not need to use browser detection script, and then allow the ability to directly install the device to set the target style sheet, that is, to detect the user to use a small screen device, CSS rules will be adjusted to fit the screen size, from the screen to remove extraneous elements, Provide a smaller picture to make the text clearer

2. Grammar

@link element Invocation, separated by commas in the middle of multiple media selections

1 <  href= ""  rel= "stylesheet"  media= "Logic Media and ( Expression) ">

1 <  href= ""  rel= "stylesheet"  media= "Srceen,projection"  >

@import Directive invocation

1 @import url ("file") logic media and (expression)

@ Add in style sheet or STYLE element

1 @media Logic Media and (expression) {2      rules  3 }

3. Media Features

@ Style

1 @media screen (min-width:400px) {2      h1{3           background:4        }5 }

@ Device Width and height

1 @media Media and (device-width:1024px) {rules} 2 @media Media and (max-device-width:1024px) {rules} 3 @media Media and (min-device-width:1024px) {rules}

@ Direction

1 @media Media and (orientation:landscape/portrait) {rules}

@ aspect ratio

1 @media Media and (aspect-ratio:horizontal/vertical) {rules} 2 @media Media and (device-aspect-ratio:horizontal/vertical) {rules}

@ pixel ratio

1 @media Media and (-webkit-device-pixel-ratio:number) {rules} 2 @media Media and (-moz-device-pixel-ratio:number) {rules} 3 @media Media and (Max--moz-device-pixel-ratio:number) {rules} 4 @media Media and (Min--moz-device-pixel-ratio:number) {rules}

CSS3--Media enquiry