css 关于自适应页面

 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-width: 400px)">
17 
18 
19 //当屏幕的宽度大于600小于800时，应用styleB.css
20 <link rel="stylesheet" type="text/css" href="styleB.css"  media="screen and (min-width: 600px) and (max-width: 800px)">
21 
22 //
23 @media screen and (max-width: 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