CSS3中的media查询

浏览数：35 / 时间：2015年06月09日

这几天，在看慕课网的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 方法

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

② @import方法

@importurl(reset.css) screen;

③ @media 方法

<style type="text/css">
    @media screen{
    选择器{/*你的样式代码写在这里…*/}
}
</style>

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*/
<linkrel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" />

二、响应式设计中的布局技巧

第一，尽量少用无关紧要的div；
第二，不要使用内联元素（inline）；
第三，尽量少用JS或flash；
第四，丢弃没用的绝对定位和浮动样式；
第五，摒弃任何冗余结构和不使用100%设置。
第六，尽量使用H5的有含义的标签

怎么样的布局或者说HTML结构才是简单干净
的呢？这里教大家一个快速测试的方法。
你首先禁掉你页面中所有的样式（以及与样式
相关的信息），在浏览器中打开，如果你的内
容排列有序，方便阅读，那么你的这个结构
不会差到哪里去。