>今天我们要学习的是页面布局中一个很重要的布局–响应式布局 。基本上每个项目都需要做这样一个布局，因为设备屏幕分辨率的多样性，我们必须做一些兼容性的体验，也就是响应式布局 。
响应式效果展示
文章插图
文章插图
效果分析：随着设备窗口尺寸的变化，会做出适合当前窗口尺寸的布局方式 。比如当你窗口一行显示不了三个卡片时，会变为两个一行或者一个一行 。这就是我们说的响应式布局 。
ps：这边拓展一个容易混淆的概念–自适应布局 。
1、响应式布局就是实现不同屏幕分辨率的终端上浏览网页的不同展示方式 。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验 。换句话说就是一个网站能够兼容多个终端，而不是为了每一个终端做一个特定的版本 。
文章插图
文章插图
响应式布局案例
2、自适应布局就是指能忘了使网页自适应的显示在不同大小终端设备上的新网页设计方式及技术，它需要开发多套界面来适应不同的终端 。
文章插图
文章插图
自适应布局案例
代码实现在我们看到响应式布局效果和搞清楚概念后，我们一起来看下上面效果图中的实现代码 。
文章插图
文章插图
【html响应式网页设计代码范文 html做响应式网页】代码分析：这边主要是看 .city 这个类的样式（css），有用到一个css属性：浮动（float） 。在代码中我们可以看到 .city 类下有一个 float: left; 代码段，这边指的是当前Dom元素脱离文档流往左边浮动，可以简单理解为离地往左边飞 。因为离地浮起来了，多以当空间（窗口宽度）不够用是吗，就会被挤到下一行 。
结语在实际项目开发中会运到很多这样的场景，所以这是一个必须掌握的知识点 。希望大家务必需要多花点心思，如果有遇到什么问题可以随时私信我 。
欢迎咨询讨论，感谢你的观看 。。。
推荐阅读
- 晚上睡觉空调开睡眠模式省电吗 晚上睡觉空调开什么模式最省电
- html文字标签是什么 html常用的文本标签有哪些
- 月息和年息的计算公式 月息和年息的换算方法
- 预付年金现值计算公式推导过程 预付年金现值计算公式excel
- 怎么样的哄睡方式能让宝宝规律入睡呢
- 空调睡眠模式开多少度凉快最省电 空调睡眠模式调到几度合适夏天
- 空调睡眠模式开28度可以吗 空调开28度还需要开睡眠模式吗
- 空调睡眠模式1和2的区别 晚上空调开睡眠模式1好还是2好
- 电脑主机参数怎么看 台式电脑配置怎么看参数
- 电脑c盘可以格式化吗格式化步骤 电脑c盘格式化会怎么样