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

手机响应式开发（下）

添加响应式图片

案例描述本案例实现的是，网页在不同的浏览器屏幕宽度中展示不同的图片。

技术准备使用picture标签使用CSS图片

使用picture标签语法格式picturesourcesrcset=1.jpgmedia=(max-width:700px)/imgsrc=2.jpg/picture

使用CSS图片语法格式@mediascreenand(min-width:700px){css样式代码}

案例实现

使用第三方插件升级视频功能

案例描述在响应式网站中，对视频进行处理也是较常见的。本实例将实现一个响应式视频页面。

技术准备使用HTML5手机播放器组件

使用HTML5手机播放器组件第三方组件工具，通过JavaScript和CSS技术，不仅能完美实现响应式视频，更能大大扩展视频播放的功能，如点赞、分享和换肤等。这里介绍willesPlay手机播放器组件的使用方法。

案例实现

响应式导航菜单

案例描述在响应式网站成为一种标配的同时，响应式导航菜单的实现方式也多种多样。这里介绍两种常用的响应式导航菜单：CSS3响应式菜单和JavaScript响应式菜单。

技术准备CSS响应式菜单JavaScript响应式菜单

案例实现

实现响应式表格

案例描述在响应式网站中，响应式表格的实现方法也有很多，这里介绍其中一种非常重要的方法：隐藏表格中的列。下面以某企业2018年到2023年的销售业绩表为例，详细讲解如何将表格“变形”。

技术准备隐藏表格中的列滚动显示表格中的列转换表格中的列

案例实现

AI辅助编程——添加响应式网页内容

内容概览实现购物网站响应式导航使用响应式表格输出考试成绩表