《MediaQueries移动设备样式.ppt》由会员分享，可在线阅读，更多相关《MediaQueries移动设备样式.ppt（50页珍藏版）》请在金锄头文库上搜索。
1、HTML5移动移动Web开发开发第第7讲讲 Media Queries移动设备样式移动设备样式请到请到 240FTP ./ HTML5移动移动Web开发开发下载下载第第7讲文件夹讲文件夹广州大学华软软件学院广州大学华软软件学院HTML5移动移动Web开发开发第第2页页主要内容主要内容1.属性选择器属性选择器2.伪类选择器伪类选择器3.阴影阴影4.背景背景5.圆角边框圆角边框6.Media Querise 移动设备样式移动设备样式7.把传统网站移植成移动把传统网站移植成移动Web网站网站8.习题习题HTML5移动移动Web开发开发第第3页页详细内容详细内容1.概述概述2.Media Querie
2、s的使用方式的使用方式3.把传统网站移植成移动把传统网站移植成移动Web网站网站4.习题习题HTML5移动移动Web开发开发第第4页页1、概述、概述Media Queries直译过来就是直译过来就是“媒体查询媒体查询”，在我们平时，在我们平时的的Web页面中页面中head部分常看到这样的一段代码：部分常看到这样的一段代码： 或者这样的形式：或者这样的形式： import url(css/style.css); HTML5移动移动Web开发开发第第5页页在在CSS3中我们可以设置不同类型的媒体条件，并根据对应中我们可以设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式
3、表的条件，给相应符合条件的媒体调用相对应的样式表。首先来看一个简单的实例：首先来看一个简单的实例： 上面的上面的media语句表示的是：当页页宽度小于或等于语句表示的是：当页页宽度小于或等于600px,调用调用small.css样式表来渲染你的样式表来渲染你的Web页面。页面。HTML5移动移动Web开发开发第第6页页首先来看一个简单的实例：首先来看一个简单的实例： 首先来看首先来看media的语句中包含的内容：的语句中包含的内容：1、screen：这个不用说大家都知道，指的是一种媒体类型；：这个不用说大家都知道，指的是一种媒体类型；2、and：被称为关键词，与其相似的还有：被称为关键词，与其
4、相似的还有not,only，稍后会，稍后会介绍；介绍；3、（、（max-width:600px）：这个就是媒体特性，说得通俗一）：这个就是媒体特性，说得通俗一点就是媒体条件。点就是媒体条件。HTML5移动移动Web开发开发第第7页页（1） 媒体类型（媒体类型（Media Type）媒体类型媒体类型(Media Type)在在css2中是一个常见的属性，也中是一个常见的属性，也是一个非常有用的属性，可以通过媒体类型对不同的设是一个非常有用的属性，可以通过媒体类型对不同的设备指定不同的样式，在备指定不同的样式，在css2中我们常碰到的就是中我们常碰到的就是 all（全部）（全部）,screen（屏
5、幕）（屏幕）,print（页面打印或打邱预（页面打印或打邱预览模式）览模式）,其实在媒体类型不止这三种，其实在媒体类型不止这三种，w3c总共列出总共列出了了10种媒体类型。种媒体类型。HTML5移动移动Web开发开发第第8页页（1） 媒体类型（媒体类型（Media Type）页面中引入媒体类型方法也有多种：页面中引入媒体类型方法也有多种：1、link方法引入方法引入 2、xml方式引入方式引入 HTML5移动移动Web开发开发第第9页页（1） 媒体类型（媒体类型（Media Type）3、import方式引入方式引入import引入有两种方式，一种是在样式文件中通过引入有两种方式，一种是在样式
6、文件中通过import调用别一个样式文件；另一种方法是调用别一个样式文件；另一种方法是 在在/head中的中的.中引入，单这中引入，单这种使用方法在种使用方法在 ie6-7都不被支持都不被支持 如样式文件中调用另一如样式文件中调用另一个样式文件：个样式文件： import url(css/reset.css) screen; import url(css/print.css) print;HTML5移动移动Web开发开发第第10页页（1） 媒体类型（媒体类型（Media Type）3、import方式引入方式引入在在/head中的中的.中调用：中调用： import url(css/style
7、.css) all; HTML5移动移动Web开发开发第第11页页（1） 媒体类型（媒体类型（Media Type）4、media引入引入这种引入方式和这种引入方式和imporr是一样的，也有两种方式：是一样的，也有两种方式：样式文件中使用：样式文件中使用： media screen 选择器选择器 属性：属性值；属性：属性值； HTML5移动移动Web开发开发第第12页页（1） 媒体类型（媒体类型（Media Type）4、media引入引入在在/head中的中的.中调用：中调用： media screen 选择器选择器 属性：属性值；属性：属性值； HTML5移动移动Web开发开发第第13页
8、页（2）媒体特性（）媒体特性（Media Query）Media Query是是CSS3 对对Media Type的增强版，其实可的增强版，其实可以将以将Media Query看成看成Media Type(判断条件判断条件)+CSS(符符合条件的样式规则合条件的样式规则)，常用的特性，常用的特性w3c共列出来共列出来13种。种。HTML5移动移动Web开发开发第第14页页（2）媒体特性（）媒体特性（Media Query）为了更能理解为了更能理解Media Query，我们在次回到前面的实例上：，我们在次回到前面的实例上： 转换成转换成css中的写法为：中的写法为： media screen
9、and (max-width: 600px) 选择器选择器 属性：属性值；属性：属性值； HTML5移动移动Web开发开发第第15页页主要区别在：主要区别在：1、Media query只接受单个的逻辑表达式作为其值，或者只接受单个的逻辑表达式作为其值，或者没有值；没有值；2、css属性用于声明如何表现页页的信息；而属性用于声明如何表现页页的信息；而Media Query是一个用于判断输出设备是否满足某种条件的表达是一个用于判断输出设备是否满足某种条件的表达式；式；3、Media Query其中的大部分接受其中的大部分接受min/max前缀，用来前缀，用来表示其逻辑关系，表示应用于大于等于或者小
10、于等于某个表示其逻辑关系，表示应用于大于等于或者小于等于某个值的情况值的情况4、CSS属性要求必须有属性值，属性要求必须有属性值，Media Query可以没有可以没有值，因为其表达式返回的只有真或假两种值，因为其表达式返回的只有真或假两种。HTML5移动移动Web开发开发第第16页页详细内容详细内容1.概述概述2.Media Queries的使用方式的使用方式3.把传统网站移植成移动把传统网站移植成移动Web网站网站4.习题习题HTML5移动移动Web开发开发第第17页页Media Queries的使用方式的使用方式一、最大宽度一、最大宽度Max Width 上面表示的是：当屏幕小于或等于上
11、面表示的是：当屏幕小于或等于600px时，将采用时，将采用small.css样式来渲染样式来渲染Web页面。页面。二、最小宽度二、最小宽度Min Width 上面表示的是：当屏幕大于或等于上面表示的是：当屏幕大于或等于900px时，将采用时，将采用big.css样式来渲染样式来渲染Web页面。页面。HTML5移动移动Web开发开发第第18页页Media Queries的使用方式的使用方式三、多个三、多个Media Queries使用使用 Media Query可以结合多个媒体查询，换句话说，一个可以结合多个媒体查询，换句话说，一个Media Query可以包含可以包含0到多个表达式，表达式又可
12、以包到多个表达式，表达式又可以包含含0到多个关键字，以及一种到多个关键字，以及一种Media Type。正如上面的其表示的是当屏幕在正如上面的其表示的是当屏幕在600px-900px之间时采之间时采用用style.css样式来渲染样式来渲染web页面。页面。HTML5移动移动Web开发开发第第19页页Media Queries的使用方式的使用方式四、设备屏幕的输出宽度四、设备屏幕的输出宽度Device Width 上面的代码指的是上面的代码指的是iphone.css样式适用于最大设备宽度样式适用于最大设备宽度为为480px，比如说，比如说iPhone上的显示，这里的上的显示，这里的max-de
13、vice-width所指的是设备的实际分辨率，也就是指可所指的是设备的实际分辨率，也就是指可视面积分辨率视面积分辨率HTML5移动移动Web开发开发第第20页页Media Queries的使用方式的使用方式五、五、iPhone4 上面的样式是专门针对上面的样式是专门针对iPhone4的移动设备写的。的移动设备写的。HTML5移动移动Web开发开发第第21页页Media Queries的使用方式的使用方式六、六、iPad 在大数情况下，移动设备在大数情况下，移动设备iPad上的上的Safari和在和在iPhone上的上的是相同的，只是他们不同之处是是相同的，只是他们不同之处是iPad声明了不同的
14、方向，声明了不同的方向，比如说比如说 上面的例子，在纵向上面的例子，在纵向(portrait)时采用时采用portrait.css来渲染页面；来渲染页面；在横向（在横向（landscape）时采用）时采用landscape.css来渲来渲 染页面。染页面。HTML5移动移动Web开发开发第第22页页Media Queries的使用方式的使用方式七、七、android /*240px的宽度的宽度*/ /*360px的宽度的宽度*/ /*480px的宽度的宽度*/ HTML5移动移动Web开发开发第第23页页Media Queries的使用方式的使用方式八、八、not关键字关键字 not关键字是用
15、来排除某种制定的媒体类型，换句话来说就关键字是用来排除某种制定的媒体类型，换句话来说就是用于排除符合表达式的设备。是用于排除符合表达式的设备。HTML5移动移动Web开发开发第第24页页Media Queries的使用方式的使用方式九、九、only关键字关键字 only用来定某种特定的媒体类型，可以用来排除不支持媒体用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实查询的浏览器。其实only很多时候是用来对那些不支持很多时候是用来对那些不支持Media Query但却支持但却支持Media Type的设备隐藏样式表的。的设备隐藏样式表的。HTML5移动移动Web开发开发第第25
16、页页Media Queries的使用方式的使用方式十、其他十、其他在在Media Query中如果没有明确指定中如果没有明确指定Media Type，那么其，那么其默认为默认为all，如：，如： 十一、加载十一、加载建议在已有的样式表中追加媒体查询样式。使用如下语法建议在已有的样式表中追加媒体查询样式。使用如下语法即可在已有样式表中加入媒体查询：即可在已有样式表中加入媒体查询：media screen and (max-width: 768px) /*样式样式*/HTML5移动移动Web开发开发第第26页页例例 ex7_1.html 添加如下代码，调整浏览器宽度添加如下代码，调整浏览器宽度HT
17、ML5移动移动Web开发开发第第27页页HTML5移动移动Web开发开发第第28页页详细内容详细内容1.概述概述2.Media Queries的使用方式的使用方式3.把传统网站移植成移动把传统网站移植成移动Web网站网站4.习题习题HTML5移动移动Web开发开发第第29页页回顾回顾 ViewPort ViewPort 标记用于指定用户是否可以缩标记用于指定用户是否可以缩放放Web页面，如果可以，那么缩放到的最大和最小缩页面，如果可以，那么缩放到的最大和最小缩放比例是什么。放比例是什么。使用使用 ViewPort 标记还表示文档针对移动设备标记还表示文档针对移动设备进行了优化。进行了优化。Vi
18、ewPort 标记的标记的content值值 是由指令及其值是由指令及其值组成的以逗号分隔的列表。组成的以逗号分隔的列表。HTML5移动移动Web开发开发第第30页页3、Media Queries如何工作如何工作HTML5移动移动Web开发开发第第31页页3、Media Queries如何工作如何工作HTML5移动移动Web开发开发第第32页页3、把传统网站移植成移动、把传统网站移植成移动Web网站网站考虑内容优先考虑内容优先三栏三栏 - 两栏两栏 - 一栏一栏宽度改为百分比宽度改为百分比HTML5移动移动Web开发开发第第33页页3、把传统网站移植成移动、把传统网站移植成移动Web网站网站我
19、们来看一下上节课的作业我们来看一下上节课的作业sample.htmlhtml5.css见见 文件夹文件夹 “ex7_2”HTML5移动移动Web开发开发第第34页页HTML5移动移动Web开发开发第第35页页3、把传统网站移植成移动、把传统网站移植成移动Web网站网站文件夹文件夹 “ex7_3”HTML5移动移动Web开发开发第第36页页HTML5移动移动Web开发开发第第37页页三栏的情况三栏的情况HTML5移动移动Web开发开发第第38页页第一步第一步在在sample.html中添加代码，注意顺序。中添加代码，注意顺序。HTML5移动移动Web开发开发第第39页页第二步新建第二步新建ipa
20、d.cssHTML5移动移动Web开发开发第第40页页两栏的情况两栏的情况HTML5移动移动Web开发开发第第41页页第三步新建第三步新建iphone.css请大家动手改写请大家动手改写iphone.css，使得页面适应屏幕宽度，使得页面适应屏幕宽度低于低于550px的显示，显示效果为一栏。的显示，显示效果为一栏。如下图所示。如下图所示。HTML5移动移动Web开发开发第第42页页一栏的情况一栏的情况HTML5移动移动Web开发开发第第43页页根据文档根据文档“修改浏览器修改浏览器.doc”修改浏览器，查看网页修改浏览器，查看网页在移动端的实际显示情况。在移动端的实际显示情况。屏幕大小为：屏幕
21、大小为：700*800看不清字体看不清字体怎么办？怎么办？HTML5移动移动Web开发开发第第44页页大多数开发人员使用像素来定义字体的大小。虽然像素在普通大多数开发人员使用像素来定义字体的大小。虽然像素在普通网站使用是网站使用是OK的，但是对于响应式网站来说应该有响应式的字的，但是对于响应式网站来说应该有响应式的字体。事实上，一个响应式的字体大小应关联它的父容器的宽度，体。事实上，一个响应式的字体大小应关联它的父容器的宽度，这样它才可以适应客户端这样它才可以适应客户端 的屏幕。的屏幕。CSS3 规范引入了一个新的单位叫规范引入了一个新的单位叫 rem，和，和 em 类相似，但相类相似，但相对
22、于对于 HTML 元素来说，元素来说， rem 更易于使用。更易于使用。rem 是相对于是相对于 HTML 元素的，不要忘了重置元素的，不要忘了重置 HTML 的字体大的字体大小：小： html font-size:100%; HTML5移动移动Web开发开发第第45页页HTML5移动移动Web开发开发第第46页页修改网页，如文件夹修改网页，如文件夹“ex7_4”HTML5移动移动Web开发开发第第47页页HTML5移动移动Web开发开发第第48页页请大家新建文件请大家新建文件iphone.css，使得页面显示如下：，使得页面显示如下：HTML5移动移动Web开发开发第第49页页作业：普通网页作业：普通网页 见见“ resume_demo-原版原版 ”请把普通网页修改为可以显示在移动设备上的网页。请把普通网页修改为可以显示在移动设备上的网页。命名为：学号姓名命名为：学号姓名-实验实验7，上传至，上传至ftp.HTML5移动移动Web开发开发第第50页页
