响应式网页设计之初步了解

最新推荐文章于 2024-02-19 21:38:32 发布

PRINT！

最新推荐文章于 2024-02-19 21:38:32 发布

阅读量426

点赞数 3

分类专栏：响应式网页学习笔记文章标签： javascript html css3

本文链接：https://blog.csdn.net/qq_48592827/article/details/114292322

版权

响应式网页学习笔记专栏收录该内容

20 篇文章 3 订阅

订阅专栏

响应式网页设计

一、什么是响应式网页？

答：为不同设备类型（如：电脑、手机、平板电脑）建立的不同的网页，检测到分辨率（应该可以说是屏幕吧）大小后调整到相应的网页。

二、响应式网页的作用？

答：为了解决不同设备的显示问题
如图所示，如果我们将网页进行等比缩放，那么将会存在很多界面显示不完整问题或者不美观，总之影响用户体验就是不行

响应式网页设计
正是因为存在这样的问题，才有了响应式设计，通过建立一个网页自动改变网页内容大小、布局适应不同分辨率的屏幕。

三、开发响应式网页需要什么开发工具呢？

所谓工欲善其事，必先利其器
① 开发工具
我比较推荐的是Visual Studio Code 【https://code.visualstudio.com/】
vscode

至于如果使用我这里就不进行赘述啦（网上有很多安装及使用的教程）
② 浏览器
我常用的就是谷歌浏览器(Chrome)
chrome

四、响应式开发常用断点

首先来解释什么是断点？简单来说就是一个分辨率区间就是一个效果，比如屏幕宽度是375px~640px一般就是手机屏幕，那么针对手机屏幕我们的内容大小样式也会发生变化【注：px是像素】，正如我们最开始说的响应式网页开发是为了解决不同设备的显示问题，那么如何解决的呢？就是根据不同的分辨率展示不同的页面效果
这里也不得不引入一个知识点：媒体查询@media

@media(min-width: Xpx){
	/* css样式代码 */
}
/* 宽度在 X~ ∞ 之间时（即大于X时），应用当前css样式 */
@media(max-width: Xpx){
	/* css样式代码 */
}
/* 宽度在 0 ~ X 之间时（即小于X时），应用当前css样式 */
@media(min-width: Xpx) and (max-width: Ypx){
	/* css样式代码 */
}
/* 宽度在 X ~ Y 之间时，应用当前css样式 */

常用断点

五、响应式网页小案例

通过以上内容来完成一个小案例
根据分辨率的改变来调整页面内容（盒子颜色、文字大小等）

下图是原样式

下图是题目要求
案例题目描述
原样式结构（大体框架）

<body>
		<div class="card"></div>
		<p class="text">Hello World</p>
		<div class="card"></div>
		<p class="text">Hello World</p>
	</body>

原样式css样式

<style type="text/css">
			.card{
				width: 800px;
				height: 400px;
				background-color: black;
				margin: 20px;
				float: left;
			}
			/* after伪元素用于清除浮动*/
			.text::after{ 
				content: "";      /* 内容为空 */
				display: block;   /* 块元素 */
				clear: both;      /* 清除浮动 */
			}
			
			.text{
				font-size: 60px;
				margin: 0px;
				line-height: 400px;
				text-align: center;	
			}
		</style>

完整代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.card{
				width: 800px;
				height: 400px;
				background-color: black;
				margin: 20px;
				float: left;
			}
			.text::after{
				content: "";
				display: block;
				clear: both;
			}
			
			.text{
				font-size: 60px;
				margin: 0px;
				line-height: 400px;
				text-align: center;	
			}
			@media (max-width:1440px) and (min-width:1280px) {
				.card{
					width: 700px;
					height: 350px;
					margin: 15px;
					background-color: green;
				}
					
				.text{
					font-size: 50px;
					line-height: 350px;
				}
			}
			@media (max-width:1280px) and (min-width:1024px) {
				.card{
					width: 600px;
					height: 300px;
					margin: 15px;
					background-color: blue;
				}
				.text{
					font-size: 40px;
					line-height: 300px;

				}
			}
			@media (max-width:1024px) and (min-width:768px) {
				.card{
					width: 500px;
					height: 250px;
					margin: 10px;
					background-color: yellow;
					font-size: 30px;
				}
				.text{
					font-size: 30px;
					line-height: 250px;

				}
			}
			@media (max-width:768px) and (min-width:640px) {
				.card{
					width: 400px;
					height: 200px;
					margin: 10px;
					background-color: red;
				}
				.text{
					font-size: 25px;
					line-height: 200px;

				}
			}
			@media (max-width:640px) and (min-width:375px) {
				.card{
					width: 100%;
					height: 200px;
					margin: 10px;
					background-color: pink;
				}
				.text{
					font-size: 40px;
					line-height: 80px;

				}
			}
			@media (max-width:375px) {
				.card{
					width: 100%;
					height: 150px;
					margin: 0px;
					background-color: orange;
				}
				.text{
					font-size: 20px;
					line-height: 40px;

				}
			}
		</style>
	</head>
	<body>
		<div class="card"></div>
		<p class="text">Hello World</p>
		<div class="card"></div>
		<p class="text">Hello World</p>
	</body>
</html>