11、响应式布局

最新推荐文章于 2023-05-04 22:11:45 发布

苍鹰蛟龙

最新推荐文章于 2023-05-04 22:11:45 发布

阅读量374

点赞数

分类专栏： CSS3 文章标签： @media

本文链接：https://blog.csdn.net/u010502101/article/details/85227163

版权

CSS3 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

响应式布局是为了开发一个网页不是为了支持某种终端，而是为了支持多种终端设备，比如每种终端的分辨率不同，可以根据不同终端的分辨率进行不同的显示。
在设置响应式布局时，需要用@media媒体选择器标识，可以从媒体类型、媒体属性、关键字设置不同的响应方式。

1、媒体类型
媒体类型常用的可选值如下(详情见：https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media)：

all ：所有媒体；
print：打印设备；
screen：主要适用于彩色的电脑屏幕；

示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			#wrap{
				width: 300px;
				height: 300px;
				margin: 200px auto;
				border: 1px solid;
			}
			
			@media print {
				#wrap{
					border: 5px dotted;
				}
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			
		</div>
	</body>
</html>

正常情况下，网页上显示的只是实现方框，方框线粗1px，打印时显示的虚线框，线粗5px
效果如下：
在这里插入图片描述

2、媒体属性：
常用媒体属性有（详情见：https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media）：

width：分辨率等于指定值时响应；
min-width 分辨率宽度大于设置值的时候响应；
max-width 分辨率宽度小于设置值的时候响应；
orientation：portrait 竖屏时响应；
orientation：landscape 横屏时响应；
min-device-pixel-ratio 指定像素比时响应。

示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			#wrap{
				width: 200px;
				height: 200px;
				margin: 200px auto;
				border: 1px solid;
			}
			
			@media screen and (min-width:500px){
				#wrap{
					background: green;
				}
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			
		</div>
	</body>
</html>

如果是彩色屏幕时，并且width的最小像素不能小于500px，则触发响应，效果如下：
在这里插入图片描述

3、关键字
关键字主要有三种

and：连接媒体特性；
not：排除指定媒体类型；
only：只对某种媒体类型起作用。

示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			#wrap{
				width: 200px;
				height: 200px;
				margin: 200px auto;
				border: 1px solid;
			}
			
			@media not print and (min-width:500px){
				#wrap{
					border: 5px dotted;
				}
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			
		</div>
	</body>
</html>

非打印预览状态下，并且宽度的最低像素不能小于500px，显示一个5px线虚宽的方框；否则显示一个1px实线宽的方框。效果如下：
在这里插入图片描述