跟我一起学JS吧！_js前端学习吧-CSDN博客

本文链接：https://blog.csdn.net/qq_53738230/article/details/114586127

JavaScript学习笔记

文章目录

JavaScript学习笔记
一、JavaScript是什么？
二、JavaScript能做什么?
三、JavaScript的组成
四、响应式网页
五、媒体查询：@media

完全由本人原创，作为小白难免会出现错漏，敬请指正

一、JavaScript是什么？

JavaScript是一门客户端脚本语言
运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎
脚本语言：不需要编译，直接就可以被浏览器解析执行

二、JavaScript能做什么?

客户端表单验证
动态效果
改变页面内容
等等

三、JavaScript的组成

在这里插入图片描述

四、响应式网页

1.响应式网页的作用

为了适应不同设备的需要
能在不同的设备之间根据屏幕分辨率的不同自动调整大小

2.浏览器内核

在这里插入图片描述

3.常用开发工具

在这里插入图片描述

五、媒体查询：@media

1.代码格式

在这里插入图片描述

2.常用断点

在这里插入图片描述

3.使用示例

示例代码如下（请复制代码运行在浏览器上，按F12调整宽度看效果）：

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		* {
			padding: 0px;
			margin: 0px;
		}

		.box1,
		.box2 {
			width: 800px;
			height: 400px;
			background-color: #000;
			margin: 20px;
			float: left;
		}

		.p1 {
			font-size: 60px;
			text-align: center;
			line-height: 400px;
		}

		.p1::after {
			content: "";
			display: block;
			clear: both;
		}

		@media (min-width:1280px) and (max-width:1440px) {

			.box1,
			.box2 {
				width: 700px;
				height: 350px;
				padding: 15px;
				background-color: green;
			}

			.p1 {
				font-size: 50px;
				text-align: center;
				line-height: 350px;
			}
		}

		@media (min-width:1024px) and (max-width:1280px) {

			.box1,
			.box2 {
				width: 600px;
				height: 300px;
				padding: 15px;
				background-color: blue;
			}

			.p1 {
				font-size: 40px;
				text-align: center;
				line-height: 300px;
			}
		}

		@media (min-width:768px) and (max-width:1024px) {

			.box1,
			.box2 {
				width: 500px;
				height: 250px;
				padding: 10px;
				background-color: yellow;
			}

			.p1 {
				font-size: 30px;
				text-align: center;
				line-height: 250px;
			}
		}

		@media (min-width:640px) and (max-width:768px) {

			.box1,
			.box2 {
				width: 400px;
				height: 200px;
				padding: 10px;
				background-color: red;
			}

			.p1 {
				font-size: 25px;
				text-align: center;
				line-height: 200px;
			}
		}

		@media (min-width:375px) and (max-width:640px) {

			.box1,
			.box2 {
				width: 100%;
				height: 200px;
				padding: 10px;
				background-color: pink;
			}

			.p1 {
				font-size: 40px;
				text-align: center;
				line-height: 80px;
			}
		}

		@media (max-width:375px) {

			.box1,
			.box2 {
				width: 100%;
				height: 150px;
				padding: 0px;
				background-color: orange;
			}

			.p1 {
				font-size: 20px;
				text-align: center;
				line-height: 40px;
			}
		}
	</style>
</head>

<body>
	<div class="box1"></div>
	<div class="p1">Hello World</div>
	<div class="box2"></div>
	<div class="p1">Hello World</div>
</body>

</html>