CSS3 媒体查询(Media Query)

最新推荐文章于 2024-07-29 14:03:52 发布

wlwc0627

最新推荐文章于 2024-07-29 14:03:52 发布

阅读量402

点赞数

文章标签： css3 移动设备

本文链接：https://blog.csdn.net/actorWen/article/details/78841751

版权

不同的设备之间尺寸和分辨率千差万别，尤其是移动设备，屏幕分辨率变得更

加复杂。分辨率差异化的扩大，使得不得不根据屏幕的分辨率给用户呈现不同

的界面。因此我们使用媒体查询来解决这一问题。

例如：通过不同的屏幕宽度来显示不同的颜色，过程如下：

对于块元素div而言，当屏幕宽度大于900px时显示为红色；当屏幕宽度介于600px

和900px之间时显示为蓝色；当屏幕宽度小于600px时显示为绿色。其代码如代码1

所示：

代码1：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体查询</title>
<style type="text/css">
*{margin:0;padding: 0;}
div{
height: 400px;
border: 0.1px solid blue;
background-color: green;
}
@media screen and (min-width: 900px) {
div{background-color: red}
}
@media screen and (min-width:600px) and (max-width: 900px){
div{background-color: blue}
}
</style>
</head>
<body>
<div></div>
</body>
</html>