《响应式页面设计》_项目2响应式页面设计.pptxVIP

;1、响应式设计;如果一个项目适用于多种屏幕大小，页面效果会随屏幕大小的改变而实时调整，这样的设计称为响应式设计。;将不同的终端设备划分成不同的类型，称为媒体类型，当然主要使用的还是screen，除此还有打印机print设备等。;stylemedia=screen

h1{color:red;}

/style

stylemedia=print

h1{color:green;}

/style

stylemedia=screen,print

h1{font-size:40px;}

/style

/head

body

h1媒体设备类型/h1

/body;媒体查询利用@media规则，针对不同媒体类型设置不同的样式。以屏幕媒体为例，对常见的设备尺寸进行划分后，分别确定为不同的尺寸的设备设计专门的布局方式，如表所示。;与之对应的媒体查询条件;媒体查询语法，媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回true或false。

@medianot|only|allmediatypeand(expressions){

CSS代码...;

};2.2.4媒体特性;1、link方法;示例1：在CSS中书写@media方法，实现在大于等于1200px的设备上页面背景为蓝色，在小于等于768px的设备上页面背景为红色，其他尺寸的设备背景颜色为默认颜色。;示例4：利用媒体查询的link方式完成，PC电脑页面背景设置为红色，在平板上页面背景设置为绿色，手机设备背景颜色为蓝色。其中pc.css、ipad.css、mobile.css中将样式写好。;应用弹性盒与响应式完成如下两个页面布局任务。

示例1制作的页面效果如下所示。;应用弹性盒与响应式完成如下两个页面布局任务。

示例2制作的页面效果如下所示。