响应式布局介绍

最新推荐文章于 2024-06-13 09:59:43 发布

月疯

最新推荐文章于 2024-06-13 09:59:43 发布

阅读量190

点赞数

分类专栏：【HTML5】

本文链接：https://blog.csdn.net/chehec2010/article/details/119381353

版权

【HTML5】专栏收录该内容

45 篇文章 6 订阅

订阅专栏

1、模块中内容：挤压（拉）布局不变

2、模块中内容：换行铺平

3、模块内容：删减（增加）

4、模块位置变换（布局改变）

5、模块展示方式改变：隐藏（展开）（布局改变）

6、模块数量改变：删减（增加）（布局改变）

响应式布局的设计：

设计特点：
1、面对不同分辨率设备灵活性强
2、能够快捷解决多设备显示适应问题

缺点：
1、兼容各种设备工作量大，效率低下
2、代码累赘，会出现隐藏无用的元素，加载时间加长
3、其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
4、一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

实现小例子：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			img{
				display: block;
				width: 100%;
			}
			section{
				max-width:1200px;
				background: #ccc;
				margin: 0 auto;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
				align-content: flex-start;
			}
			div{
				margin-bottom: 20px;
			}
			@media all and (min-width:1024px) and (max-width:1200px){
				div{
					width: 23%;
				}
			}
			@media all and (min-width:750px) and (max-width:1023px){
				div{
					width: 32%;
				}
			}
			@media all and (min-width:480px) and (max-width:749px){
				div{
					width: 48%;
				}
			}
			@media all and (min-width:320px) and (max-width:479px){
				div{
					width: 90%;
				}
			}
		</style>
	</head>
	<body>
		<section>
		<div >
			<img src="./img/4.jpg" >
		</div>
		<div >
			<img src="./img/4.jpg" >
		</div>
		<div >
			<img src="./img/4.jpg" >
		</div>
		<div >
			<img src="./img/4.jpg" >
		</div>
		<div >
			<img src="./img/4.jpg" >
		</div>
		<div >
			<img src="./img/4.jpg" >
		</div>
		<div >
			<img src="./img/4.jpg" >
		</div>
		<div >
			<img src="./img/4.jpg" >
		</div>
		<div >
			<img src="./img/4.jpg" >
		</div>
		<div >
			<img src="./img/4.jpg" >
		</div>
		
		
		</section>
	</body>
</html>

月疯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
响应式布局介绍

1、模块中内容：挤压（拉）布局不变2、模块中内容：换行铺平3、模块内容：删减（增加）4、模块位置变换（布局改变）5、模块展示方式改变：隐藏（展开）（布局改变）6、模块数量改变：删减（增加）（布局改变）实现小例子：代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title&g...
复制链接

扫一扫