文章插图
文章插图
今天我们要学习的是页面布局中一个很重要的布局–响应式布局 。基本上每个项目都需要做这样一个布局,因为设备屏幕分辨率的多样性,我们必须做一些兼容性的体验,也就是响应式布局 。
响应式效果展示
效果分析:随着设备窗口尺寸的变化,会做出适合当前窗口尺寸的布局方式 。比如当你窗口一行显示不了三个卡片时,会变为两个一行或者一个一行 。这就是我们说的响应式布局 。
ps:这边拓展一个容易混淆的概念–自适应布局 。
1、响应式布局就是实现不同屏幕分辨率的终端上浏览网页的不同展示方式 。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验 。换句话说就是一个网站能够兼容多个终端,而不是为了每一个终端做一个特定的版本 。
响应式布局案例
2、自适应布局就是指能忘了使网页自适应的显示在不同大小终端设备上的新网页设计方式及技术,它需要开发多套界面来适应不同的终端 。
自适应布局案例
代码实现
在我们看到响应式布局效果和搞清楚概念后,我们一起来看下上面效果图中的实现代码 。
代码分析:这边主要是看 .city 这个类的样式(css),有用到一个css属性:浮动(float) 。在代码中我们可以看到 .city 类下有一个 float: left; 代码段,这边指的是当前Dom元素脱离文档流往左边浮动,可以简单理解为离地往左边飞 。因为离地浮起来了,多以当空间(窗口宽度)不够用是吗,就会被挤到下一行 。
结语
在实际项目开发中会运到很多这样的场景,所以这是一个必须掌握的知识点 。希望大家务必需要多花点心思,如果有遇到什么问题可以随时私信我 。
【什么是响应式网页,如何实现 html响应式网页设计代码范文】欢迎咨询讨论,感谢你的观看 。。。
- 为什么三伏天排寒湿最好
- office图标不见了,但是office里面的东西都还在 office图标不见了影响使用吗
- 彩色玉米是转基因还是杂交
- 开空调点香薰蜡烛会中毒吗
- 薄荷泡水用老叶还是嫩叶
- 玉米特殊甜是打了甜蜜素吗
- 优酸乳是酸奶还是饮料
- 身份证到期可以异地办理吗
- 初伏吃什么食物好养生
- 空调制热为什么吹一会儿就停了