CSS3中的media查询_html/css_WEB-ITnose-html教程-PHP中文网

CSS3中的media查询_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:47:41

原创

1177人浏览过

这几天，在看慕课网的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结构才是简单干净
的呢？这里教大家一个快速测试的方法。
你首先禁掉你页面中所有的样式（以及与样式
相关的信息），在浏览器中打开，如果你的内
容排列有序，方便阅读，那么你的这个结构
不会差到哪里去。