响应式网页笔记（第一次课）

最新推荐文章于 2023-06-12 11:05:52 发布

年少有为✘

最新推荐文章于 2023-06-12 11:05:52 发布

阅读量267

点赞数

文章标签： js

本文链接：https://blog.csdn.net/qq_46454139/article/details/114330225

版权

响应式网页笔记（第一次课）

一、初识响应式网页

响应式网页设计（Responsive web design）。
可能这个名词听起来比较高大上，其实理解了之后并不困难。有细心的小伙伴可能会留意到，当你打开某些特定网页的时候你会发现电脑上和手机上的显示效果并不太一样。若是该网页只支持电脑端的话，那手机端的显示效果可能会变得很“怪异”。这点在我之前使用我们学校智慧校园系统的时候我深有体会。在手机打开的时候操作起来非常别扭，有些功能点甚至不能够完全显示出来。其实这种问题就是响应式网页设计需要解决的关键。即在使用不同分辨率设备的时候网页能否适应设备以达到正常良好的显示和使用效果。
所以综上：若是一个网页能够适应不同设备和分辨率，那么它就是一个响应式的网页

响应式网页的作用就是：
在这里插入图片描述

二、常用Web开发工具

如下图：
在这里插入图片描述
#响应式开发
这里以HBuilder为例。创建项目便不必多说。只是新版与旧版的HBuilder略有不同
既然想要网页具有响应式功能，那么“媒体查询标签@media”便不得不说了
@media的作用就是当网页在不同分辨率的时候，使用它网页可以做出相应的样式改变。
以下是**@media**的用法：
在这里插入图片描述
@media一般是嵌入在css代码之中的。
例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.aa{
				width: 800px;
				height: 400px;
				background-color: black;
				margin: 20px;
				float: left;
			}
			.bb::after{
				content: "";
				display: block;
				clear: both;
			}
			.bb{
				font-size: 60px;
				margin: 0;
				text-align: left;
				line-height: 400px;
			}
			@media(min-width:1280px) and (max-width:1439px){
            .aa{
                width: 700px;
                height: 350px;
                margin: 15px;
                background-color: green;
            	}
            .bb{
                font-size: 50px;
                line-height: 350px;
            	}
        	}

既然说到了响应式开发，必然应该对“断点”这一概念有所了解。其实“断点”就是各种设备常用到的分辨率。
具体如下：
在这里插入图片描述
根据不同的“断点”，可以据此写出不同的媒体查询语句。

最后，通过常用“断点”我们可以做一个简单的小栗子，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.aa{
				width: 800px;
				height: 400px;
				background-color: black;
				margin: 20px;
				float: left;
			}
			.bb::after{
				content: "";
				display: block;
				clear: both;
			}
			.bb{
				font-size: 60px;
				margin: 0;
				text-align: left;
				line-height: 400px;
			}
			@media(min-width:1280px) and (max-width:1439px){
            .aa{
                width: 700px;
                height: 350px;
                margin: 15px;
                background-color: green;
            	}
            .bb{
                font-size: 50px;
                line-height: 350px;
            	}
        	}
			@media(min-width:1024px) and (max-width:1279px){
				.aa{
					width: 600px;
					height: 300px;
					margin: 15px;
					background-color: blue;
				}
				.bb{
					font-size: 40px;
					line-height: 300px;
				}
			}
			@media(min-width:768px) and (max-width:1023px){
            .aa{
                width: 500px;
                height: 250px;
                margin: 10px;
                background-color: yellow;
            	}
            .bb{
                font-size: 30px;
                line-height: 250px;
            	}
        	}
        	@media(min-width:640px) and (max-width:767px){
            .aa{
                width: 400px;
                height: 200px;
                margin: 10px;
                background-color: red;
            	}
            .bb{
                font-size: 25px;
                line-height: 200px;
            	}
        	}
        	@media(min-width:375px) and (max-width:639px){
            .aa{
                width: 100%;
                height: 200px;
                margin: 10px;
                background-color: pink;
            	}
            .bb{
                font-size: 40px;
                line-height: 80px;
            	}
        	}
        	@media(max-width:374px){
            .aa{
                width: 100%;
                height: 150px;
                margin: 0;
                background-color: orange;
            	}
            .bb{
                font-size: 20px;
                line-height: 40px;
            	}
        	}
		</style>
	</head>
	<body>
		<div class="aa"></div>
		<h2 class="bb">hello world</h2>
		<div class="aa"></div>
		<h2 class="bb">hello world</h2>
	</body>
</html>

在HBuilder上运行这段代码可以看到一个响应式网页在不同分辨率下颜色的明显变化

总结

通过第一堂课程，自己对响应式网页开始有了一点最基本的认识，希望后面通过深入学习js，能够掌握更多的技巧

年少有为✘

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
响应式网页笔记（第一次课）

响应式网页笔记（第一次课）一、初识响应式网页响应式网页设计（Responsive web design）。可能这个名词听起来比较高大上，其实理解了之后并不困难。有细心的小伙伴可能会留意到，当你打开某些特定网页的时候你会发现电脑上和手机上的显示效果并不太一样。若是该网页只支持电脑端的话，那手机端的显示效果可能会变得很“怪异”。这点在我之前使用我们学校智慧校园系统的时候我深有体会。在手机打开的时候操作起来非常别扭，有些功能点甚至不能够完全显示出来。其实这种问题就是响应式网页设计需要解决的关键。即在使用不同
复制链接

扫一扫