A-CSS 响应式布局讲解.pptx

HTML5网页设计主讲：陈玲模块八页面布局与规划

2.1理解响应式布局响应式布局介绍视口的概念实现购乐乐影视网的页面导航2025

2.1.1响应式布局介绍随着iOS和Android系统的发布，智能手机、平板电脑和智能家电等设备层出不穷，但面对形形色色的终端设备，千差万别的屏幕分辨率也给网页设计带来了新的挑战。响应式网页设计提供了一种设计方法，可以使同一网站在智能手机、桌面电脑以及介于这两者之间的任意设备上完美显示。

2.1.1响应式布局介绍响应式设计使用百分比布局创建流动的弹性界面，同时使用媒体查询来限制元素的变动范围。优点：面对不同分辨率设备时，灵活性较强能够快捷解决多设备显示适应问题缺点：兼容各种设备，工作量大，效率低下代码累赘，加载时间加长因多方面因素影响而达不到最佳效果一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

2.1.2视口的概念移动设备上的视口就是设备的屏幕能用来显示用户网页的那一块区域。具体地说，就是浏览器上用来显示网页的那部分区域。在页面加载时，可以使用meta标签设置浏览器的视口(viewport)的宽度。metaname=viewport“content=width=device-width,initial-scale=1.0,maximum-scale=1.0,??user-scalable=0?/以上设置作用是让当前视口的宽度等于设备的宽度，同时不允许用户手动缩放。

2.1.2视口的概念视口的相关属性设置属性名说明width设置layoutviewport的宽度为一个正整数或字符串“width-device”initial-scale设置页面的初始缩放值为一个数字，可以带小数minimum-scale允许用户的最小缩放值为一个数字，可以带小数maximum-scale允许用户的最大缩放值为一个数字，可以带小数height设置layoutviewport的高度为一个正整数或字符串“height-device”user-scalable是否允许用户进行缩放，值为“no”或“yes”。no代表不允许，yes代表允许

2.1.2视口的概念创建购乐乐后台管理顶部导航菜单，并在head标签中添加视口，设置视口的宽度与设备宽度相同，初始缩放值为1，即为不缩放。!DOCTYPEhtmlhtmlhead metaname=viewportcontent=width=device-width,initial-scale=1.0/title购乐乐后台管理/title/headbodydivclass=“header”h1购乐乐后台管理/h1/divdivclass=navul li后台首页/liliahref=#商品管理/a/li liahref=#订单管理/a/liliahref=#评论管理/a/li liahref=#广告管理/a/liliahref=#系统管理/a/li/ul/div/body/html使用div-ul-li块结构实现菜单视口属性设置CSS代码：*{margin:0px;padding:0px;}.header{ background:#FF7701;color:#FFFFFF; padding-left:15px;font-size:24px}.nav{ background:#949694;height:30px; line-height:30px;padding-left:20px;}.navul{list-style:none;overflow:hidden;}.navulli{width:20%;float:left;}

2.1.2视口的概念使用Chrome模拟移动设备的步骤如下：按住F12键调出开发工具。点击开发工具的菜单栏中模拟器按钮。模拟器按钮设置移动设备类型F12调出开发工具

2.1.3学生实践练习使用视口实现响应式设计，以此来创建购乐乐影视页面的页眉导航部分。20

2.1.3学生实践练习打开DreamwareCC工具，创建HTML5网页，命名为“index.html”。在页面的head标签部分添加meta实现初始化视口。在body标签部分添加两个div标签，其中一个div标签的class设置header作为页面标题，另一个div标签的class设置nav，并添加ul-li实现导航菜单。创建style.css文件，编写CSS样式规则，美化页面。使用浏览器预览效果。

2.2媒体查询媒体查询介绍媒体查询语法结构及用法实现购乐乐影视网的页面导航2025

2