1 //不能使用绝对宽度的布局 不能使用具有绝对宽度的元素 2 3 media_type 设备类型说明 4 all 所有设备 5 aural 听觉设备 6 braille 点字触觉设备 7 handled 便携设备，如手机、平板电脑 8 print 打印预览图等 9 projection 投影设备 10 screen 显示器、笔记本、移动端等设备 11 tty 如打字机或终端等设备 12 tv 电视机等设备类型 13 embossed 盲文打印机 14 15 //屏幕的宽度 大于等于400px的时候，应用styleA.css 16 <link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min- 400px)"> 17 18 19 //当屏幕的宽度大于600小于800时，应用styleB.css 20 <link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min- 600px) and (max- 800px)"> 21 22 // 23 @media screen and (max- 641px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/ 24 .class { 25 background: #ccc; 26 } 27 } 28 29 移动端 //h:w = 16:9 (9h/16/ 360*9/16 = h) 30 360*640 31 480 32 720 33 1080 34 35 36 目前主流的台式机显示器尺寸及对应的分辨率如下 37 18.5英寸/1366*768 38 19英寸/1440*900 39 20英寸/1600*900 40 21.5英寸/1920*1080 41 22英寸/1680*1050 42 23英寸/1920*1080 43 24英寸/1920*1080 44 27英寸/1920*1080 45 27英寸/2560*1440