Responsive layout Settings-@media only screens and

@media only screens and only(Qualification of certain equipment) Screenis one of the media types. andCalled keywords, other keywords also include not(Exclude a device)

/* Common Type */
Type explanation
All devices
Braille Braille
Embossed Braille Printing
Handheld Handheld devices
Print Document printing or Print preview mode
Projection project presentations, such as slideshows
Screen Color Computer screens
Speech speech
TTY Fixed letter spacing grid Media, such as a telex typewriter
Tv

Screen generally used more, the following is my own attempt to list the size of commonly used devices, and then to the page divided into several sizes of the version.

/* Common devices */
Device Screen Size
Display x 800
ipad 1024x768 x 768
Android x 480
IPhone 640 x 960

Two different ways

A<link rel= "stylesheet" type= "Text/css" href= "styleb.css" media= "screen and (min-width:600px) and (max-width:800px) > means that when the width of the screen is greater than 600 and less than 800, the application styleb.css b@media screen and (max-width:600px) {/* Apply the following CSS style when the display size is less than 600px */

  . class {    background: #ccc;  }}

Device-aspect-ratiodevice-aspect-ratio can be used to fit a device with a specific screen aspect ratio, which is also a useful property, for example, our page wants to define a style for a normal screen with a aspect ratio of 4:3, and then for 16:9 and 16 : 10 widescreen, define another style, such as adaptive width and fixed width:

@media only screen and (DEVICE-ASPECT-RATIO:4/3)

comparison of common values for-webkit-min-device-pixel-ratio ( is the physical pixel and device independent pixels on the device, device pixel ratio )

Equipment	Resolution	Device pixel ratio
Android ldpi	The	0.75
Iphone 3 & Android MDPI	320x480	1
Android HDPI	480x800	1.5
Iphone 4	960x640	2.0

-webkit-min-device-pixel-ratio:1.0

• All non-Retina MAC
• All non-Retina IOS devices
• Acer Iconia A500
• Samsung Galaxy Tab 10.1
• Samsung Galaxy S
• Other equipment

• -webkit-min-device-pixel-ratio is 1.3

1. Google Nexus 7

• -webkit-min-device-pixel-ratio is 1.5

1. Google Nexus S
2. Samsung Galaxy S II
3. HTC Desire
4. HTC Desire HD
5. HTC Incredible S
6. HTC Velocity
7. HTC Sensation

• -webkit-min-device-pixel-ratio is 2.0

1. IPhone 4
2. IPhone 4S
3. IPhone 5
4. IPad (3rd generation)
5. IPad 4
6. All Retina displays for Mac
7. Google Galaxy Nexus
8. Google Nexus 4
9. Google Nexus 10
10. Samsung Galaxy S III
11. Samsung Galaxy Note II
12. Sony Xperia S
13. HTC One X

-webkit-min-device-pixel-ratio:3.0

1.HTC Butterfly
2.Sony Xperia S

(MIN-RESOLUTION:144DPI)
<resolution> (resolution)

Used in: Bitmap media type, accepts max/min prefixes:

The resolution media attribute describes the resolution of the output device, for example, pixel density. If you query a non-square pixel of a device, the min-resolution value specified in the query must be compared to the most sparse size and must be compared to the max-resolution most dense size in the query. For " resolution " (No "min-" or "max-" prefixes) the query never queries the device's non-square pixels.

For presses, the resolution (the resolution of the plotted point of any color) is equivalent.

Example: This media query indicates that the style sheet is suitable for devices with a resolution greater than 144 dots per inch: @media print and (min-resolution:144dpi) {...}

Responsive layout settings [email protected] only screens and