11、响应式布局

版权声明:转载请注明出处 https://blog.csdn.net/u010502101/article/details/85227163

响应式布局是为了开发一个网页不是为了支持某种终端,而是为了支持多种终端设备,比如每种终端的分辨率不同,可以根据不同终端的分辨率进行不同的显示。
在设置响应式布局时,需要用@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实线宽的方框。效果如下:
在这里插入图片描述

展开阅读全文

没有更多推荐了,返回首页