响应式布局之媒体查询功能

最新推荐文章于 2024-06-21 12:00:00 发布

Crazier_qi

最新推荐文章于 2024-06-21 12:00:00 发布

阅读量8k

点赞数 2

分类专栏： css3 文章标签：响应式布局媒体查询

本文链接：https://blog.csdn.net/github_33261002/article/details/51377485

版权

css3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

实现响应式布局有很多方法：

媒体查询功能：Media Queries就是其中之一

media用来指定特定的媒体类型，例如屏幕（screen）和打印（print）和支持所有媒体介质的all

如果要在head部分引用，形式如下：

        <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
	<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
	<link rel="stylesheet" href="css/print.css" type="text/css" media="print">

当然还可以在<style></style>中引用：

		<style type="text/css">
			@media screen{
				选择器{
					属性：属性值；
				}
			}	
		</style>

通过一个简单的例子就明白了怎么媒体查询了：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>media Queries</title>
	<style>
		div{
			width: 600px;
			height: 600px;
			background-color: red;
		}
		@media (max-width: 800px) {
			div{
			width:500px;
			height:500px;
			background-color:yellow;
			}
		}		
		@media (max-width: 500px) {
			div{
			width:300px;
			height:300px;
			background-color:blue;
			}
		}
	</style>
<body>
	<div></div>
</body>
</html>

例子很简单，max-width为品目显示最大宽度，因此：

当屏幕宽度大于800时，显示一个600*600的大红块

小于或等于800时，显示一个500*500的黄色div

同理，屏幕宽度小于等于500时，显示一个300*300的蓝色div

效果如图：

1.屏幕宽度为：1366px全屏状态

2.屏幕宽度为611px

3.屏幕宽度为440px

同理：也可以用min-width表示当屏幕宽度大于或等于xxxpx时的状态

或者采用screen and (min-width:600px) and (max-width:900px)结合多个媒体查询

Crazier_qi

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
响应式布局之媒体查询功能

实现响应式布局有很多方法：媒体查询功能：Media Queries就是其中之一media用来指定特定的媒体类型，例如屏幕（screen）和打印（print）和支持所有媒体介质的all如果要在head部分引用，形式如下：当然还可以在中引用： @media screen{ 选择器{ 属性：属性值； } } 通
复制链接

扫一扫

专栏目录