@media screen解决移动web开发的多分辨率问题

最新推荐文章于 2023-08-26 20:00:39 发布

2012013977

最新推荐文章于 2023-08-26 20:00:39 发布

阅读量1w

点赞数

分类专栏：移动端响应式文章标签：移动端响应式

本文链接：https://blog.csdn.net/nianzhi1202/article/details/52464078

版权

移动端响应式专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在css2中就有media type属性，用于判断媒体类型。而在css3中新增了 media query属性用于增强media type属性。media query属性可以看做是是media type属性的增强版，使media type可以进行条件判断输出对应的css。screen仅是media中的一种

常用设备的尺寸：

显示器1280 x 800
ipad 1024 x 768
Android 800 x 480
iPhone 640 x 960

当只使用min_width或则max_width时；我们用min-width时，小的放上面大的在下面，同理如果是用max-width那么就是大的在上面，小的在下面，顺序不能混淆。例如

@media (min-width: 768px){ //>=768的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 1200){ //>=1200的设备 }

当然在很多情况下都是混合使用；例如

@media screen and (min-width: 960px) and (max-width: 1199px) { #page{ width: 960px; }#content,.div1{width: 650px;}#secondary{width:250px}select{max-width:200px} }

还有一种方法是我不常使用的：

注意其与device-aspect-ratio的区别

写了一段代码，可能有不合理之处，但是效果还是有的：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>响应式布局</title>
</head>
<meta name="viewport" content="width=device-width;initial-scale=1.0">
<style>
*{
padding:0;
margin:0;
}
@media screen and (min-width: 960px){
#header{
width:100%;
margin:0 auto;
height:60px;
background:#eee;
}
#sousuo{
margin:0 auto;
width:420px;
height:40px;
}
#sousuo input{
width:73%;
height:90%;
float:left;
}
#sousuo button{
float:right;
height:95%;
width:26%;
}
#zero{
width:100%;
height:200px;
border:1px solid blue;
}
#one{
width:30%;
height:100%;
border:1px solid red;
float:left;
}
#two{
width:40%;
height:100%;
border:1px solid #ccc;
float:left;
margin-left:20px;
}
#three{
width:26%;
height:100%;
border:1px solid yellow;
float:right;
}
}
@media screen and (min-width:600px) and (max-width:960px){
#header{
width:100%;
height:60px;
background:#ccc;
}
}

@media screen and (max-width:360px){
#header{
width:100%;
height:60px;
background:pink;
}
#sousuo{
width:320px;
height:50px;
/*border:1px solid blue;*/
}
#sousuo input{
width:200px;
height:50px;
}
#sousuo button{
width:100px;
height: 60px;
}

#zero{
width:100%;
height:1000px;
background:#c8c8c8;
margin-top:20px;
position:absolute;
}
#zero #one{
width:90%;
height:300px;
background:#506478;
position:relative;
margin:0 auto;
margin-top:20px;
}
#zero #two{
position:relative;
width:90%;
height:300px;
background:#506478;
margin:0 auto;
margin-top:20px;
}
#zero #three{
position:relative;
width:90%;
height:300px;
background:#506478;
margin:0 auto;
margin-top:20px;
}

}
</style>
<body>
<div id="header">这里是头部</div>
<div id="sousuo">
<input type="text">
<button>百度一下</button>
</div>
<div id="zero">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</div>

</body>
</html>