CSS3 Media Queries详细介绍和使用实例

　　Media Queries直译过来就是“媒体查询”，在我们平时的Web页面中head部分常看到这样的一段代码：

　　其中两种方式引入CSS样式都有一个共同的属性“media”，而这个“media”就是用来指定特定的媒体类型，在HTML4和CSS2中充许你使用“media”来指定特定的媒体类型，如屏幕（screen）和打印（print）的样式表，当然还有其他的，比如说“TV”,“handheld”等，其中“all”表示的是支持所有媒体介质。有关于更多的Media类型，可以查看。

　　上面简单说了一下HTML4和CSS2的“Media Queries”,而今天的主要是来学习CSS3中的”Media Queries”的更多使用方法和相关知识，下面我们开始进入今天的主题。CSS3中的Media Queries增加了更多的媒体查询，同时你可以添加不同的媒体类型的表达式用来检查媒体是否符合某些条件，如果媒体符合相应的条件，那么就会调用对应的样式表。换句简单的说，“在CSS3中我们可以设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表”。现在最常见的一个例子，你可以同时给PC机的大屏幕和移动设备设置不同的样式表。这功能是非常强大的，他可以让你定制不同的分辨率和设备，并在不改变内容的情况下，让你制作的web页面在不同的分辨率和设备下都能显示正常，并且不会因此而丢失样式。

　　上面的media语句表示的是：当页页宽度小于或等于600px,调用small.css样式表来渲染你的Web页面。首先来看media的语句中包含的内容：

　　前面这个简单的实例引出两个概念性的东西，一个就是媒体类型（Media Type）和 媒体特性（Media Query），首先一起来理解一下这两个概念：

　　媒体类型(Media Type)在css2中是一个常见的属性asp学习，也是一个非常有用的属性，可以通过媒体类型对不同的设备指定不同的样式，在css2中我们常碰到的就是all（全部）,screen（屏幕）,print（页面打印或打邱预览模式）,其实在媒体类型不止这三种，w3c总共列出了10种媒体类型。

　　以上几种方法都有其各自的利弊，在实际应用中我建议使用第一种和第四种，因为这两种方法是在项目制作中是常用的方法，对于他们的具体区别，我就不说了，想了解的大家可以去找度娘或Ｇ爸，他们能帮你解决。

　　2、css属性用于声明如何表现页页的信息；而Media Query是一个用于判断输出设备是否满足某种条件的表达式；

　　3、Media Query其中的大部分接受min/max前缀，用来表示其逻辑关系，表示应用于大于等于或者小于等于某个值的情况

　　4、CSS属性要求必须有属性值，Media Query可以没有值，因为其表达式返回的只有真或假两种

　　Media Query可以结合多个媒体查询，换句话说，一个Media Query可以包含0到多个表达式，表达式又可以包含0到多个关键字，以及一种Media Type。正如上面的其表示的是当屏幕在600px-900px之间时采用style.css样式来渲染web页面asp代码编程工具怎么用视频教程手机版。

　　上面的代码指的是iphone.css样式适用于最大设备宽度为480px，比如说iPhone上的显示，这里的max-device-width所指的是设备的实际分辨率，也就是指可视面积分辨率

　　在大数情况下，移动设备iPad上的Safari和在iPhone上的是相同的，只是他们不同之处是iPad声明了不同的方向，比如说上面的例子，在纵向(portrait)时采用portrait.css来渲染页面；在横向（landscape）时采用landscape.css来渲染页面。

　　我们可以使用media query为android手机在不同分辨率提供特定样式，这样就可以解决屏幕分辨率的不同给android手机的页面重构问题。

　　only用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有：支持媒体特性（Media Queries）的设备，正常调用样式，此时就当only不存在；对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备，这样就会不读了样式，因为其先读only而不是screen；另外不支持Media Qqueries的浏览器，不论是否支持only，样式都不会被采用。

　　上面代码中style.css样式被用在宽度小于或等于480px的手持设备上，或者被用于屏幕宽度大于或等于960px的设备上。

　　最后总体归纳一下其功能，就是一句话：Media Queries能在不同的条件下使用不同的样式，使用页面达到不同的渲染效果。。

　　课程开始： 前三节课，我们知道了什么是“内容块状元素和内联元素”，以及XHTML+CSS布局的核心概念“盒子模型”，同时又学习了一下页面布局中两种方法中的一种方法“浮动&...查看详情

　　上节课我们将导航条做成了下面的效果但是此时的导航条还没有链接，还不能点击，这节课我们就要做一个完整的导航条【第四步】 我们需要将上面的导航条做以下几个修改 1）给上面的导航加上链接； 2）链接文字大小修改为12px; 3）并且规定链接样式，鼠标移上去和拿开的效果 修改方法如下 1...查看详情

　　【第一步 整体布局与公共CSS定义】我们先来分析一下这个页面页面主要分5大块，顶部的Logo、导航条Nav、Banner、Content、Footer，如下图 下载 (116.12 KB)2009-6-1 09:22这样HTML就很容易写出来了复制代码代码如下: <div ...查看详情

　　【第七步 内容左侧板块(ContentL)布局】 我们分析一下他的结构，主要包括标题和文章内容两块，并且标题和内容之间有一条虚线，而第二篇文章的内容部分是图片和文字相结合且文字环绕图片。 好~！既然搞清楚结构了，后面我们布局就容易了 我打算标题用<h1>标签，为什么这...查看详情

　　如果下面的文字实在是无法理解透，那就记住这节课最后总结的一句话“如果用position来布局页面，父级元素的position属性必须为relative，而定位于父级内部某个位置的元素，最好用absolute，因为它不受父级元素的padding的属性影响，当然你也可以用...查看详情

　　如果你还是不能太明白这句话，我们就做个实例，把我们第5节页面的头部blog区域用定位(position)来布局一下 HTML代码和原来的没有区别： 复制代码代码如下: <div id=Logo> <a href=# id=logoLink>&l...查看详情

　　说到浏览器兼容性问题，就必须说CSS Hack！提到Hack大家肯定会想到电脑黑客(hacker)、和病毒程序联系到一块，不过在CSS中，Hack是指一种兼容CSS在不同浏览器中正确显示的技巧方法。说的更直白一些就是，你平时做个页面，布局正确，CSS正确，可就是在不同的浏览器中显...查看详情

　　代码如下： HTML代码： 复制代码代码如下: <a id=theLink></a> CSS代码： 复制代码代码如下: #theLink{ display:block;/*因为标签a是内链元素，所以利用这句话将内链元素转化成块状元素，后面的width和...查看详情

　　前言为了帮助确保你的网页在所有未来的IE版本都有一致的外观，IE8引入了文件兼容性。在IE6中引入一个增设的兼容性模式，文件兼容性使你能够在IE呈现你的网页时选择特定编译模式。新的IE为了确保网页在未来的版本中都有一支的外观，IE8引入了文件兼容性。当你引入一个增设的兼容性模式，...查看详情

　　使用CSS来修饰滚动条 1．overflow内容溢出时的设置 overflow-x水平方向内容溢出时的设置 overflow-y垂直方向内容溢出时的设置 以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。 2．scrollbar-3d-ligh...查看详情