第七讲mediaqueries移动设备样式.pptVIP

第7讲 Media Queries移动设备样式;主要内容;详细内容;1、概述;在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）;（1） 媒体类型（Media Type）;（1） 媒体类型（Media Type）;（1??? 媒体类型（Media Type）;（1） 媒体类型（Media Type）;（1） 媒体类型（Media Type）;（2）媒体特性（Media Query）;（2）媒体特性（Media Query）;主要区别在： 1、Media query只接受单个的逻辑表达式作为其值，或者没有值； 2、css属性用于声明如何表现页页的信息；而Media Query是一个用于判断输出设备是否满足某种条件的表达式； 3、Media Query其中的大部分接受min/max前缀，用来表示其逻辑关系，表示应用于大于等于或者小于等于某个值的情况 4、CSS属性要求必须有属性值，Media Query可以没有值，因为其表达式返回的只有真或假两种。;详细内容;Media Queries的使用方式;Media Queries的使用方式;Media Queries的使用方式;Media Queries的使用方式;Media Queries的使用方式;Media Queries的使用方式;Media Queries的使用方式;Media Queries的使用方式;Media Queries的使用方式;例 ex7_1.html 添加如下代码，调整浏览器宽度;详细内容;回顾 ViewPort ;3、Media Queries如何工作;3、Media Queries如何工作;3、把传统网站移植成移动Web网站;3、把传统网站移植成移动Web网站;;3、把传统网站移植成移动Web网站;;三栏的情况;第一步;第二步新建ipad.css;两栏的情况;第三步新建iphone.css;一栏的情况;根据文档“修改浏览器.doc”修改浏览器，查看网页在移动端的实际显示情况。 屏幕大小为：700*800 看不清字体 怎么办？ ;;;修改网页，如文件夹“ex7_4”;;请大家新建文件iphone.css，使得页面显示如下：;作业：普通网页 见“ resume_demo-原版 ”;