CSS3中的media查询_html/css_WEB-ITnose
这几天，在看慕课网的CSS3，写得很详细，
地址在这：http://www.imooc.com/code/1405
做一下笔记：
一、css3中的media查询
1、CSS3中的10种媒体查询类型
值 设备类型
all 所有设备 (需要熟悉的)
screen 屏幕显示器 (需要熟悉的)
print 打印用纸或打印预览视图 (需要熟悉的)
braille 盲人用点字法触觉回馈设备
embossed 盲文打印机
handheld 便携设备
projection 各种投影设备
speech 语音或音频合成器
tv 电视机类型设备
tty 使用固定密度字母栅格的媒介，比如电传打字机和终端
2.常见的3重媒体类型的引用方法
① link 方法
@importurl(reset.css) screen;
③ @media 方法
3. 媒体查询的使用方法
@media 媒体类型and （媒体特性）{你的样式}
媒体类型：上面提到的10种
媒体特性：max-width:400px 最大宽度
min-width:400px 最小宽度
...
/*用and连接*/@media screen and (min-width:600px) and (max-width:900px){ body {background-color:#f5f5f5;}} ②排除某个设备
/*用not*/@media not print and (max-width: 1200px){ 样式代码}/*上面代码表示的是：样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中。*/ ③仅仅使用在某个设备
/*用only*/
二、响应式设计中的布局技巧
第一，尽量少用无关紧要的div；
第二，不要使用内联元素（inline）；
第三，尽量少用JS或flash；
第四，丢弃没用的绝对定位和浮动样式；
第五，摒弃任何冗余结构和不使用100%设置。
第六，尽量使用H5的有含义的标签
怎么样的布局或者说HTML结构才是简单干净
的呢？这里教大家一个快速测试的方法。
你首先禁掉你页面中所有的样式（以及与样式
相关的信息），在浏览器中打开，如果你的内
容排列有序，方便阅读，那么你的这个结构
不会差到哪里去。