css 关于自适应页面

 //不能使用绝对宽度的布局 不能使用具有绝对宽度的元素

 media_type    设备类型说明
 all    所有设备
 aural    听觉设备
 braille    点字触觉设备
 handled    便携设备，如手机、平板电脑
 print    打印预览图等
 projection    投影设备
 screen    显示器、笔记本、移动端等设备
 tty    如打字机或终端等设备
 tv    电视机等设备类型
 embossed    盲文打印机

 //屏幕的宽度 大于等于400px的时候，应用styleA.css
  <link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)">

 //当屏幕的宽度大于600小于800时，应用styleB.css
 <link rel="stylesheet" type="text/css" href="styleB.css"  media="screen and (min-width: 600px) and (max-width: 800px)">

 //
 @media screen and (max-width: 641px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
       .class {
           background: #ccc;
        }
 }

 移动端 //h:w = 16:9 (9h/16/ 360*9/16 = h)
 360*640
 480
 720
 1080

 目前主流的台式机显示器尺寸及对应的分辨率如下
 18.5英寸/1366*768
 19英寸/1440*900
 20英寸/1600*900
 21.5英寸/1920*1080
 22英寸/1680*1050
 23英寸/1920*1080
 24英寸/1920*1080
 27英寸/1920*1080
 27英寸/2560*1440