首页 > 代码库 > html自适应布局，@media screen，媒体查询
html自适应布局，@media screen，媒体查询
html自适应布局，@media screen，媒体查询
自适应代码示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>响应式布局</title>
<style type="text/css">
*{padding:0px; margin:0px; font-family:"微软雅黑";}
#header{height:100px; border:solid 1px red; margin:0px auto;}
#main{margin:10px auto; height:400px;}
#footer{margin:0px auto; height:100px; border:solid 1px red;}
/*屏幕宽度大于900的时候*/
@media screen and (min-width:900px){
#header,#footer{width:800px;}
#main{width:800px; height:400px;}
#main-left{width:200px; height:400px; border:solid 1px red; float:left;}
#main-center{width:394px; height:400px; border:solid 1px red; float:left;}
#main-right{width:200px; height:400px; border:solid 1px red;float:left;}
}
/*屏幕宽度大于600，小于900的时候*/
@media screen and (min-width:600px) and (max-width:900px){
#header,#footer{width:600px;}
#main{width:600px; height:400px;}
#main-left{width:200px; height:400px; border:solid 1px red; float:left;}
#main-center{width:396px; height:400px; border:solid 1px red; float:left;}
#main-right{display:none;}
}
/*屏幕宽度小于600的时候*/
@media screen and (max-width:600px){
#header,#footer{width:300px;}
#main{width:300px; height:400px;}
#main-left{display:none;}
#main-center{width:300px; height:400px; border:solid 1px red;}
#main-right{display:none;}
}
</style>
</head>
<body>
<div id="header">头部</div>
<div id="main">
<div id="main-left">内容-左边</div>
<div id="main-center">内容-中间</div>
<div id="main-right">内容-右边</div>
</div>
<div id="footer">底部</div>
</body>
</html>
/*链接写法*/<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">
1、在HTML头部增加viewport标签。
在网站HTML文件的开头，增加viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度，且不进行初始缩放。代码如下：
<meta name="viewport" content="width=device-width, initial-scale=1" />
这段代码支持Chrome、Firefox、IE9以上的浏览器，但不支持IE8以及低于IE8的浏览器。
2、在CSS文件尾部增加针对不同屏幕分辨率的规则。
例如使用如下的代码，可以让屏幕宽度低于480像素的设备（如iPhone等），网页侧栏隐藏中部内容栏宽度自动调节。以下代码针对Z-Blog，WordPress相关标签名称只需修改一下即可。
@media screen and (max-device-width: 480px) {
#divMain{
float: none;
width:auto;
}
#divSidebar {
display:none;
}
}
3、布局宽度使用相对宽度。
网页总体框架可以使用绝对宽度，但往下的内容框架、侧栏等最好使用相对宽度，这样针对不同分辨率进行修改就方便。当然也可以不用相对宽度，那就需要在 @media screen and (max-device-width: 480px) 里面增加各个div的针对小屏幕的宽度，实际上更麻烦。
4、页面使用相对字体（非必要）
在HTML页面上不要使用绝对字体（px），而要使用相对字体（em），对于大多数浏览器来说，通常用 em = px/16 换算，例如16px就等于1em。
5、图片自适应（非必要）
img标签的话，只需要设置 max-width: 100%;或width:100%; 语句为：img { max-width: 98%; }
css加载的background-image如何自适应大小呢，其实CSS3中是可以实现的，添加如下语句：background-size:100% 100%;
html自适应布局，@media screen，媒体查询