第7讲 media queries移动设备样式

《第7讲 media queries移动设备样式》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第7讲MediaQueries移动设备样式请到240FTP../HTML5移动Web开发下载第7讲文件夹广州大学华软软件学院主要内容属性选择器伪类选择器阴影背景圆角边框MediaQuerise移动设备样式把传统网站移植成移动Web网站习题详细内容概述MediaQueries的使用方式把传统网站移植成移动Web网站习题1、概述MediaQueries直译过来就是“媒体查询”，在我们平时的Web页面中head部分常看到这样的一段代码：或者这样的形式：@importurl("css/style.css");在CSS3中我们可以设置不同类型的媒体条件，并根据对应的条件，

3、给相应符合条件的媒体调用相对应的样式表。首先来看一个简单的实例：上面的media语句表示的是：当页页宽度小于或等于600px,调用small.css样式表来渲染你的Web页面。首先来看一个简单的实例：首先来看media的语句中包含的内容：1、scr

4、een：这个不用说大家都知道，指的是一种媒体类型；2、and：被称为关键词，与其相似的还有not,only，稍后会介绍；3、（max-width:600px）：这个就是媒体特性，说得通俗一点就是媒体条件。（1）媒体类型（MediaType）媒体类型(MediaType)在css2中是一个常见的属性，也是一个非常有用的属性，可以通过媒体类型对不同的设备指定不同的样式，在css2中我们常碰到的就是all（全部）,screen（屏幕）,print（页面打印或打邱预览模式）,其实在媒体类型不止这三种，w3c总共列出了10种媒体类型。（1）媒体

5、类型（MediaType）页面中引入媒体类型方法也有多种：1、link方法引入2、xml方式引入（1）媒体类型（MediaType）3、@import方式引入@import引入有两种方式，一种是在样式文件中通过@import调用别一个样式文件；另一种方法是

6、在>/head>中的中引入，单这种使用方法在ie6-7都不被支持如样式文件中调用另一个样式文件：@importurl("css/reset.css")screen;@importurl("css/print.css")print;（1）媒体类型（MediaType）3、@import方式引入在>/head>中的中调用：@importurl("css/style.css")all;

7、tyle>（1）媒体类型（MediaType）4、@media引入这种引入方式和@imporr是一样的，也有两种方式：样式文件中使用：@mediascreen{选择器{属性：属性值；}}（1）媒体类型（MediaType）4、@media引入在>/head>中的中调用：@mediascreen{选择器{属性：属性值；}}（2）媒体特性（MediaQuery）MediaQuery是CSS3对

8、MediaType的增强版，其实可以将MediaQuery看成MediaType(判断条件)+CSS(符合条件的样式规则)，常用的特性w3c共列出来13种。（2）媒体特性（MediaQuery）为了更能理解MediaQu