响应式布局

最新推荐文章于 2023-09-26 22:47:59 发布

混名汪小星

最新推荐文章于 2023-09-26 22:47:59 发布

阅读量156

点赞数

分类专栏： css3

本文链接：https://blog.csdn.net/qq_28835447/article/details/96453721

版权

css3 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

响应式概念：一个网页可以兼容多种设备，而不是每一种设备写一套网页

在实际开发中，响应式并没有什么用，就是逼格高点，所以得会
更多的开发是开发多套，pc一套，phone一套

响应式和自适应的区别？
响应式：1套代码
示例网站：https://www.intel.cn/content/www/cn/zh/homepage.html
https://worktile.com/
自适应：多套代码，根据不同的设备加载不同的代码
示例网站：大部分的网站都有，因为现在的人用手机太多了

响应式网页的不足：
内容不宜过多，只适合一些展示类网站，代码量变大了，复杂了。不能有过于复杂的动画

常规的网站，大部分是1200px，缩小会出现横向滚动条，布局，样式全都不会改变

响应式/自适应网页的测试：
- 1.浏览器自带的模拟器
  优点：简单方便
  缺点：结果要进一步确定
- 2.真实物理设备测试（大公司还真是这样干的）
  iphone 4 4s 5 5s 5c 6 6p 6s 6sp 7 7p 8 x xr xs
  安卓一样买一个
  pad ipad 一样买一个
  windows
  winphone
优点：测试真实可靠
缺点：成本高，测试任务量极大

3.电脑上自带的手机模拟器效果

响应式网站如何编写：
1.必须声明viewport（重点重点）

< meta name=“viewport” content=“width=device-width,initial-scale=1.0”>

2.使用流式布局
float:left , display:inline-block

3.文字，图片，容器…使用相对尺寸（70%，em，rem），不要使用绝对尺寸（px）

em是一个相对单位，相对父元素,父元素设置size的倍数。
rem是一个相对单位，相对于页面的根元素，即html设置size的倍数
谷歌浏览器的最小号字体为12px，如果不足12，全部显示为12，别的浏览器没有限制
font-size: 62.5%; 大部分浏览器的默认字体为16px，62.5%就是10px

4.最重要的原则：媒体查询技术 css3中的内容 media query
写响应式的时候一般不需要去管高度，高度让其自己去变化，响应式肯定是不会有横向的滚动条，纵向就不一定了
css3中的媒体查询
根据不同的设备，查询到不同的代码，然后执行，不需要刷新

实例：

<!DOCTYPE html>
<html lang="en">
<head>
	<!-- 响应式和移动端必须添加视口 -->
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<meta charset="UTF-8">
	<title>媒体查询小demo</title>
	<style>
		div{
			border: 1px solid #000;
		}
		/* 初始化*/
		*{
			box-sizing: border-box;
			margin: 0;
			padding: 0;
		}
		/*这是两个盒子*/
		/* 最大的容器*/
		.container{
			margin: 0 auto;
		}
		/*用来装图片的div容器，图片用一个容器装起来防止下面的文字浮动溢上来，且易于后续操作*/
		.container-fluid{
			width: 100%;
		}
     /*使用流式布局*/
		.left,.middle,.right{
			float: left;
		}
		.my-img{
			float: left;
			padding: 5px;
		}
		
		/*媒体查询部分*/
		/*pc端   >991px*/
		@media screen and (min-width: 992px){
			.container{
				width: 970px;
			}
			.left,.right{
				width: 20%;
			}
			.middle{
				width: 60%;
			}
			.my-img{
				width: 25%;
			}
		}
		/*pad端   >768   <991*/
		@media screen and (min-width: 768px) and (max-width: 991px){
			.container{
				width: 750px;
				color: #0f0;
			}
			.left{
				width: 25%;
			}
			.middle{
				width: 75%;
			}
			.right{
				display: none;
			}
			.my-img{
				width: 25%;
			}
		}
		/*phone端   <768*/
		@media screen and (max-width: 767px){
			.container{
				width: 100%;
				color: blue;
			}
			.left,.middle{
				width: 100%;
			}
			.right{
				display: none;
			}
			.my-img{
				width: 50%;
			}
		}
	</style>
</head>
<body>
	<div class="container">
		<!-- 左边 -->
		<div class="left">左侧附加导航
			<p><span>this is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is test</span></p>
		</div>
		<!-- 中间 -->
		<div class="middle">
			<div class="container-fluid">
				<img class="my-img" src="images/1.jpg" alt="">
				<img class="my-img" src="images/2.jpg" alt="">
				<img class="my-img" src="images/3.jpg" alt="">
				<img class="my-img" src="images/4.jpg" alt="">
			</div>
			中间主体部分
			<p><span>this is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is test</span></p>
		</div>
		<!-- 右边 -->
		<div class="right"> 右侧可有可无的广告
			<p><span>this is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is testthis is test</span></p>
		</div>
	</div>
</body>
</html>

PC端大于992px；
在这里插入图片描述

pad端 >768 <991
在这里插入图片描述

phone端 <768
在这里插入图片描述

混名汪小星

关注

0
点赞
踩
1

收藏

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

响应式概念：一个网页可以兼容多种设备，而不是每一种设备写一套网页在实际开发中，响应式并没有什么用，就是逼格高点，所以得会更多的开发是开发多套，pc一套，phone一套响应式和自适应的区别？响应式：1套代码示例网站：https://www.intel.cn/content/www/cn/zh/homepage.htmlhttps://worktile.com/自适应：多套代码，根据不同...
复制链接

扫一扫