@media screen解决移动web开发的多分辨率问题
2016-09-07 22:34
274 查看
在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} }
还有一种方法是我不常使用的：
<link rel="stylesheet" type="text/css" href="style.css" media="screen and (min-width: 600px) and (max-width: 800px)">
意思是当屏幕的宽度大于600小于800时，应用style.css文件设置样式
注意其与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>
常用设备的尺寸：
显示器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} }
还有一种方法是我不常使用的：
<link rel="stylesheet" type="text/css" href="style.css" media="screen and (min-width: 600px) and (max-width: 800px)">
意思是当屏幕的宽度大于600小于800时，应用style.css文件设置样式
注意其与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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- @media screen解决移动web开发的多分辨率问题
- 使用@media screen解决移动web开发的多分辨率问题
- 使用@media screen解决移动web开发的多分辨率问题
- PrintArea打印，@media screen解决移动web开发的多分辨率问题，@media print设置打印的样式
- 一行命令解决Ubuntu不能挂载移动硬盘问题Error mounting /dev/sda1 at /media/XXXX: Command-line `mount -t "ntfs" -o
- 移动Web开发中遇见的问题以及解决方法（不断更新中）
- 使用@media screen解决分web不同分辨率问题
- JS解决移动web开发手机输入框弹出的问题
- 用Unlocker软件解决WinXP中U盘或移动硬盘无法弹出的问题
- 解决移动硬盘符不见的问题
- JasperReports＋Hibernate轻松解决Web开发中的数据报表问题
- 如何解决移动软件中的连接状态问题
- 使用远程桌面鼠标移动缓慢问题的解决
- 解决web开发中的中文问题。
- 解决Windows 2003 中Windows Media Player 10 的修复问题
- 利用TOMCAT解决WEB开发中中文乱码的问题
- usb移动硬盘写入缓存失败问题解决
- 移动硬盘常见问题的解决
- 移动硬盘常见问题的解决
- 解决安装SP3后，Window Media Player 播放器不能播放的问题