用CSS實現響應式布局
響應式布局感覺很高大上，很難，但實際上只用CSS也能實現響應式布局
要用的就是CSS中的沒接查詢，下面就介紹一下怎么運用：
使用@media 的三種方法
1.直接在CSS文件中使用：
@media 類型 and (條件1) and (條件二){
css樣式
}
@media screen and (max-width:1024px) {
body{
background-color: red;
}
}2.使用@import導入
@import url("css/moxie.css") all and (max-width:980px);3.也是最常用的方法–直接使用link連接，media屬性用于設置查詢方法
<link rel="stylesheet" type="text/css" href="css/moxie.css" media=“all and (max-width=980px)”/>下面是一個簡單的響應式的布局HTMl代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>響應式</title>
<link rel="stylesheet" type="text/css" href="index.css"/>
<link rel="stylesheet" type="text/css" href="index01.css" media="screen and (max-width:1024px) and (min-width:720px)"/>
<link rel="stylesheet" type="text/css" href="index02.css" media="screen and (max-width:720px)"/>
</head>
<body>
<div class="header">頭部</div>
<div class="main clearfix">
<div class="left">左邊</div>
<div class="center">中間</div>
<div class="right">右邊</div>
</div>
<div class="footer">底部</div>
</body>
</html>下面是CSS樣式：
*{
margin:0;
padding:0;
text-align:center;
color:yellow;
}.header{
width:100%;
height:100px;
background:#ccc;
line-height:100px;
}
.main{
background:green;
width:100%;
}
.clearfix:after{
display:block;
height:0;
content:"";
visibility:hidden;
clear:both;
}
.left,.center,.right{
float:left;
}
.left{
width:20%;
background:#112993;
height:300px;
font-size:50px;
line-height:300px;
}
.center{
width:60%;
background:#ff0;
height:400px;
color:#fff;
font-size:50px;
line-height:400px;
}
.right{
width:20%;
background:#f0f;
height:300px;
font-size:50px;
line-height:300px;
}
.footer{
新聞熱點
疑難解答
