1.Browser-size specific CSS
@media screen and (max/min-1000px){}
2.Orientation-specific CSS?
@media screen and(orientation landscape/portrait){}
3.Divice-specific CSS
@media handheld ——not be used widely
@media screen and (min-device-height: 768px) and (max-device- 1024px) {}
@media (device-pixel-ratio: 2) {}//iphone4 2 physical pixels to every CSS pixel
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
@media screen and (resolution: 326dpi(分辨率)) { /* */ }
@media screen and (min-resolution: 96dpi) { /* */ }
@media screen and (device-aspect-ratio: 16/9) { /* */ }