《HTML5+CSS3+JavaScriptWeb前端开发案例教程》课件 第10章 手机响应式开发（上）.pptxVIP

手机响应式开发（上）

手机端展示图文列表

案例描述本案例将实现一个手机端的课程列表页面。在这个页面中，展示内容包括课程标题、课程缩略图、课时和主讲老师等信息。

技术准备Flex布局Flex容器常见属性

Flex布局Flex是FlexibleBox的缩写，意为“弹性布局”，用来为盒状模型提供最佳的灵活性。

Flex容器常见属性flex-direction属性flex-wrap属性justify-content属性.box{flex-direction:row|row-reverse|column|column-reverse;}.box{flex-wrap:nowrap|wrap|wrap-reverse;}.box{justify-content:flex-start|flex-end|center|space-between|space-around;}

案例实现

手机端的用户登录

案例描述如果用户使用手机浏览网站，那么登录和注册页面对手机适配，显得尤为重要。通过调整浏览器的宽度，来模拟手机屏幕的效果。

技术准备媒体查询媒体查询的步骤

媒体查询媒体查询可以根据设备显示器的特性（如视口宽度、屏幕比例和设备方向），设定CSS的样式。媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有width、height和color等。

媒体查询的步骤metaname=viewportcontent=width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no/（1）在HTML页面head标签中，添加viewport属性的代码。（2）使用@media关键字，编写CSS媒体查询代码。@mediascreenand(max-width:700px)and(min-width:500px){body{background-color:red;}}@mediascreenand(max-width:500px){body{background-color:blue;}}

案例实现

手机端聊天界面

案例描述本案例制作的是模拟手机端在线客服界面。这里仅仅实现的是界面样式，并没有实现发送文本信息的功能。

技术准备常用布局类型布局的实现方式

常用布局类型单列布局均分多列布局不均分多列布局

布局的实现方式单一式固定布局响应式固定布局响应式弹性布局

案例实现

在手机端播放视频

案例描述视频播放在手机端也是常见的功能。常见的视频网站都已经可以很好地支持和响应手机端的适配方案了。本案例中，读者将学到如何实现手机端的视频播放，包含视频组件的很多功能，如全屏播放、设置播放速度等。

技术准备meta标签

meta标签与响应式网站相关的是viewport属性，viewport属性可以规定网页设计的宽度与实际屏幕的宽度的大小关系。语法格式metaname=viewportcontent=width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no/

meta标签属性值含义width=device-width设定布局视口宽度initial-scale=1设定布局视口高度maximum-scale=1设定页面初始缩放比例（0-10）user-scalable=no设定用户是否可以缩放（yes/no）content属性值

案例实现

AI辅助编程——使用响应式网页设计实现APP网页应用

内容概览使用Flex布局设计一个APP底部导航栏实现APP城市列表