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