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

  • 0
  • 0
  • 约1.07千字
  • 约 15页
  • 2026-02-11 发布于山东
  • 举报

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

图片响应式布局

案例介绍技术准备案例实现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案例实现

案例实现文件结构:

您可能关注的文档

文档评论(0)

1亿VIP精品文档

相关文档