第七讲MediaQueries移动设备样式.ppt

第7讲 Media Queries移动设备样式 请到 240FTP ../ HTML5移动Web开发 下载第7讲文件夹 主要内容 属性选择器 伪类选择器 阴影 背景 圆角边框 Media Querise 移动设备样式 把传统网站移植成移动Web网站 习题 详细内容 概述 Media Queries的使用方式 把传统网站移植成移动Web网站 习题 1、概述 Media Queries直译过来就是“媒体查询”，在我们平时的Web页面中head部分常看到这样的一段代码： link href=css/reset.css rel=stylesheet type=text/css media=screen / link href=css/style.css rel=stylesheet type=text/css media=all / link href=css/print.css rel=stylesheet type=text/css media=print / 或者这样的形式： style type=text/css media=screen @import url(css/style.css); /style 在CSS3中我们可以设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表。 首先来看一个简单的实例： link rel=stylesheet media=screen and (max-width: 600px) href=small.css / 上面的media语句表示的是：当页页宽度小于或等于600px,调用small.css样式表来渲染你的Web页面。 首先来看一个简单的实例： link rel=stylesheet media=screen and (max-width: 600px) href=small.css / 首先来看media的语句中包含的内容： 1、screen：这个不用说大家都知道，指的是一种媒体类型； 2、and：被称为关键词，与其相似的还有not,only，稍后会介绍； 3、（max-width:600px）：这个就是媒体特性，说得通俗一点就是媒体条件。 （1） 媒体类型（Media Type） 媒体类型(Media Type)在css2中是一个常见的属性，也是一个非常有用的属性，可以通过媒体类型对不同的设备指定不同的样式，在css2中我们常碰到的就是 all（全部）,screen（屏幕）,print（页面打印或打邱预览模式）,其实在媒体类型不止这三种，w3c总共列出了10种媒体类型。 （1） 媒体类型（Media Type） 页面中引入媒体类型方法也有多种： 1、link方法引入 link rel=stylesheet type=text/css href=../css/print.css media=print / 2、xml方式引入 ?xml-stylesheet rel=stylesheet media=screen href=css/style.css ？ （1） 媒体类型（Media Type） 3、@import方式引入 @import引入有两种方式，一种是在样式文件中通过@import调用别一个样式文件；另一种方法是 在head/head中的style.../style中引入，单这种使用方法在 ie6-7都不被支持 如样式文件中调用另一个样式文件： @import url(css/reset.css) screen; @import url(css/print.css) print; （1） 媒体类型（Media Type） 3、@import方式引入 在head/head中的style.../style中调用： head style type=text/css @import url(css/style.css) all; /style /head （1） 媒体类型（Media Type） 4、@media引入 这种引入方式和@imporr是一样的，也有两种方式： 样式文件中使用： @media screen{ 选择器{ 属性：属性值； } } （1） 媒体类型（Media Type） 4、@media引入 在head/head中的style.../style中调用： head style type=text/css @media screen{ 选择器{ 属性：属性值； } } /style /