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 方法

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

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

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


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