响应式布局-媒体查询

最新推荐文章于 2024-07-25 10:45:42 发布

hgcan163

最新推荐文章于 2024-07-25 10:45:42 发布

阅读量332

点赞数

分类专栏： JS网页设计文章标签： css html javascript

本文链接：https://blog.csdn.net/hgc2020/article/details/114329381

版权

JS网页设计专栏收录该内容

18 篇文章 0 订阅

订阅专栏

文章目录

一、响应式页面是什么？
二、实现响应式页面
三、Web开发工具介绍
- 1.常用编辑器
- 2.常用浏览器
总结

一、响应式页面是什么？

为适应不同分辨率屏幕，从而开发的能自动改变网页内容的大小、布局的页面

二、实现响应式页面

1.媒体查询@media 格式

代码如下（示例）：

<style>
@media (min-width:Xpx) and (max-width:Xpx){  
    			/* CSS样式代码 */ 
	 }
</style>

2.案例

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			#card{
				width: 800px;
				height: 400px;
				margin: 20px;
				float: left;
				background-color: black;
			}
			#text{
				margin: 0;
				font-size: 60px;
				text-align: center;
				line-height:400px;
			}
			#text::after{
				content:"";
				display: block;
				clear: both;
			}
			@media (max-width:1440px) and  (min-width:1280px){
				#card{
					width: 700px;
					height: 350px;
					margin: 15px;
					background-color: green;
				}
				#text{
					margin: 0;
					font-size: 50px;
					text-align: center;
					line-height:350px;
				}
			}
			@media (max-width:1280px) and  (min-width:1024px){
				#card{
					width: 600px;
					height: 300px;
					margin: 15px;
					background-color: blue;
				}
				#text{
					margin: 0;
					font-size: 40px;
					text-align: center;
					line-height:350px;
				}
			}
			@media (max-width:1024px) and  (min-width:768px){
				#card{
					width: 500px;
					height: 250px;
					margin: 10px;
					background-color: yellow;
				}
				#text{
					margin: 0;
					font-size: 30px;
					text-align: center;
					line-height:350px;
				}
			}
			@media (max-width:768px) and  (min-width:640px){
				#card{
					width: 400px;
					height: 200px;
					margin: 10px;
					background-color: red;
				}
				#text{
					margin: 0;
					font-size: 25px;
					text-align: center;
					line-height:350px;
				}
			}
			@media (max-width:640px) and  (min-width:375px){
				#card{
					width: 100%;
					height: 200px;
					margin: 10px;
					background-color: pink;
				}
				#text{
					margin: 0;
					font-size: 40px;
					text-align: center;
					line-height:350px;
				}
			}
			@media  (max-width:375px){
				#card{
					width: 100%;
					height: 150px;
					margin: 0px;
					background-color: orange;
				}
				#text{
					margin: 0;
					font-size: 40px;
					text-align: center;
					line-height:350px;
				}
			}
		</style>
	</head>
	<body>
		<div id="card">
			
		</div>
		<div id="text">
			Hello World 
		</div>
		<div id="card">
			
		</div>
		<div id="text">
			Hello World 
		</div>
	</body>
</html>

3.常用分辨率断点

在这里插入图片描述

三、Web开发工具介绍

1.常用编辑器

在这里插入图片描述

2.常用浏览器

在这里插入图片描述

总结

注意：min-width:Xpx 和 max-width:Xpx 的范围关系

hgcan163

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
响应式布局-媒体查询

初步了解响应式布局文章目录初步了解响应式布局一、响应式页面是什么？二、实现响应式页面1.媒体查询@media 格式2.案例4.常用分辨率断点三、Web开发工具介绍1.常用编辑器2.常用浏览器总结一、响应式页面是什么？为适应不同分辨率屏幕，从而开发的能自动改变网页内容的大小、布局的页面二、实现响应式页面1.媒体查询@media 格式代码如下（示例）：<style>@media (min-width:Xpx) and (max-width:Xpx){ /* CS
复制链接

扫一扫

专栏目录