HTML5+CSS3+JavaScript Web前端开发案例教程课件：图片响应式布局.pptxVIP

图片响应式布局

案例介绍技术准备案例实现010203

01案例介绍

案例介绍案例名称：图片响应式布局核心功能：监听屏幕尺寸改变图片响应式布局

案例介绍图片响应式布局效果

02技术准备

技术准备技术1：栅格系统栅格系统（英文：Gridsystem）是一种网页设计方法与风格，以规则的网格陈列来规范网页中的版面布局以及信息分布。栅格系统通过一系列的行（row）与列（column）的组合来创建页面布局，页面被等宽的列分为不同的等份，例如页面被分为12列、16列、24列等。

技术准备页面区域宽度为W，一个栅格单元的宽度为A，每个栅格内容区域的宽度为a，栅格之间的间距为i。在栅格系统中，设计师根据需要指定不同的版式或者划分区块改变A和i的值进行设计。

技术准备Bootstrap栅格系统类型：类前缀应用场景.col-xs-超小屏幕类（768px），类似手机等设备.col-sm-小屏幕设备类（≥768px且992px），类似平板设备.col-md-中型设备类（≥992px且1200px），类似于桌面显示器.col-lg-大型设备类（≥1200px），类似于大屏桌面显示器

技术准备Bootstrap栅格系统示例代码：divclass=rowdivclass=col-md-8.col-md-8/divdivclass=col-md-4.col-md-4/div/divdivclass=rowdivclass=col-md-4.col-md-4/divdivclass=col-md-4.col-md-4/divdivclass=col-md-4.col-md-4/div/divdivclass=rowdivclass=col-md-6.col-md-6/divdivclass=col-md-6.col-md-6/div/div

技术准备Bootstrap栅格系统示例效果：

技术准备技术2：window.onresize事件onresize事件会在窗口和框架的尺寸发生改变时触发，其示例代码如下：//JavaScript代码window.onresize(function(){//code})://jQuery代码$(window).resize(function(){//code});

03案例实现

案例实现文件结构：