课程名称：十天精通CSS3
课程章节： Media Queries 与Responsive 设计
主讲老师：大漠
课程内容：
今天学习的内容包括：Media Queries是什么？媒体类型的引用方法？not关键词的使用？only关键词的使用？多个媒体特性使用?
课程收获：
Media Queries是CSS3新增加的一个模块功能，其最大的特色就是通过CSS3来查询媒体，然后调用对应的样式。媒体类型在CSS2中是一个常见的属性，也是一个非常有用的属性，可以通过媒体类型对不同的设备指定不同的样式。在CSS2中常碰到的就是all(全部)、screen(屏幕)、print(页面打印或打印预览模式)，除此之外还有Tty、Embossed、Braille等属性。
媒体类型的引用方法也有多种，常见的有link标签、@import和CSS3新增的@media。其中link方法引入媒体类型其实就是在<link>标签引用样式的时候，通过link标签中的media属性来指定不同的媒体类型。@import可以引用样式文件，同样也可以用来引用媒体类型。@import引入媒体类型主要有两种方式，一种是在样式中通过@import调用另一个样式文件；另一种方法是在<head></head>标签中的<style></style>中引入。我们需要注意的是这种使用方法在IE6~7都不被支持。
使用Media Queries必须要使用@media开头，然后指定媒体类型（也可以称为设备类型），随后是指定媒体特性（也可以称之为设备特性）。媒体特性的书写方式和样式的书写方式非常相似，主要分为两个部分，第一个部分指的是媒体特性，第二部分为媒体特性所指定的值，而且这两个部分之间使用冒号分隔。
max-width是媒体特性中最常用的一个特性，是指媒体类型小于或等于指定的宽度时。min-width指的是媒体类型大于或等于指定宽度时，样式生效。
使用关键词“not”是用来排除某种制定的媒体类型，就是用来排除符合表达式的设备。
only用来指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。
Media Queries可以使用关键词and将多个媒体特性结合在一起。
今天学习了边框的11-1到11-3的3个小结，花费了39分钟，今天主要学习了Media Queries的各种属性的使用，我们在使用媒体查询的时候，这个是用到最多的，我们可以在不能尺寸下的屏幕中显示不同的样式布局，让我们的网站可以兼容于我们电脑端和手机端。所以我们需要熟练掌握媒体查询的各种属性的使用，这样就可以使用一套代码用于多端布局的显示。
共同学习，写下你的评论
评论加载中...
作者其他优质文章
