CSS3媒体查询适配不同屏幕大小@media

六月初六月初 CSS 2019-04-22 14:15:15

媒体查询的应用：响应式布局中我们需要根据不用屏幕尺寸来调用不同的代码，以此达到每个设备中，都能有最合适的展示方式！

@media的兼容：


CSS3 @media的两种工作方式：

1、link中判断设备的尺寸，然后引用不同的css文件：

<link rel="stylesheet" type="text/css" href="1.css" media="screen and (max-width: 400px)">

设备尺寸小于400时调用！

<link rel="stylesheet" type="text/css" href="1.css"  media="screen  and (min-width: 400px) and (max-width: 600px)">

设备尺寸在400-600之间被调用！

2、在style中直接使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>媒体查询基础使用</title>
		<!-- <link rel="stylesheet" type="text/css" href="1.css"  media="screen  and (min-width: 400px) and (max-width: 600px)"> -->
	</head>
	<body>
		<style>
			@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
				body {
					background: #ccc;
			    }
			}
			@media screen and (min-width: 600px) { /*当屏幕尺寸大于600px时，应用下面的CSS样式*/
				body {
					background: #f00;
			    }
			}
		</style>
	</body>
</html>

缩放浏览器尺寸，即可查看到不同尺寸下对应的背景色！


六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！