Web前端开发项目教程 课件 7.1.1 响应式布局简介、响应式页面设计

Web前端开发主讲人：李娜响应式布局简介、响应式页面设计【任务目标】知识目标能力目标素质目标理解响应式布局、视口的概念；掌握媒体查询的使用。能够完成简单响应式布局页面的创建。培养学生的专注精神和服务意识。【导学知识】一、响应式布局简介

响应式布局指的是同一个页面在不同屏幕尺寸下有着不同的布局。

与原始的设计方式相比有以下特点：

★

一套设计，多处使用；

★

移动设备优先。

【导学知识】一、响应式布局简介

优点：

★

面对不通分辨率的设备灵活性较强；

★

能够快捷解决多种设备的显示适应问题。

缺点：

★

需要兼容各种设备，工作量大、效率低下；

★

代码累赘，会出现一些隐藏无用的元素，导致页

面加载时间加长。【导学知识】二、响应式页面设计

1.通过<meta>标签设置视口

<metaname="viewport"content="user-scalable=no,width=device-width,initial-scale=1.0,maximum-scale=1.0">★

user-scalable：取值为yes或no，表示是否允许用户手动缩放页面,默认值为yes。

★

width:用于定义视口的宽度,单位为像素。device-width表示视窗视口与可见视口宽度相同。★

initial-scale:取值为0-10，用于定义初始的缩放值。★

maximum-scale:取值为0-10.0，用于定义最大缩放比例。【导学知识】二、响应式页面设计2.媒体查询

媒体查询主要由媒体类型和条件表达式组成：@mediamedia-typeand|not|only(media-feature){CSS-Code;}

【导学知识】二、响应式页面设计

★

mediatype(媒体类型)：告诉浏览器这段代码用在什么类型的媒体上。值描述all所有设备print用于打印机和打印预览screen用于电脑屏幕、平板电脑和手机等speech应用于屏幕阅读器等发声设备【导学知识】二、响应式页面设计

★

属性：not用来排除掉某些特定的设备，only用来指定某种特别的媒体类型。

★

mediafeature：表示媒体特性，可通过min或者max来表示大于等于或者小于进行逻辑判断。

★CSS-Code：是一组CSS规则，会在测试通过且媒体类型正确的时候应用。【导学知识】二、响应式页面设计3.不使用绝对宽度

width:xx%;

width:auto;【导学知识】二、响应式页面设计4.字体使用相对大小

p{font-size:1.5em;}

【导学知识】二、响应式页面设计5.弹性图片

img{max-width:100%;height:auto;}

【导学知识】二、响应式页面设计6.弹性内嵌视频元素

.videoembed{width:100%;height:auto;}

【案例】【案例】 /*PC端*/@media(min-width:992px){ body{background-color:gray;}}

/*iPad端*/@media(max-width:991px){ body{background-color:orange;}} /*移动端*/@media(max-width:768px){ body{background-color:blue;} } <metaname="viewport"content="width=device-width,initial-scale=1.0">【任务小结】

这节课我们学习了“响应式页面设计”的实现过程。响应式页面能够兼容不同的设备，实