【必看】CSS實現響應式佈局的方法與media的使用教程
阿新 • • 發佈：2019-01-03
用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 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> 下面是CSS樣式：
?12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455 * {
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 {
width: 100%;
height: 50px;
background: #000;
line-height: 50px;
}
index01.css樣式程式碼
.right {
float: none;
width: 100%;
background: #f0f;
clear: both;
}
.left {
width: 30%;
}
.center {
width: 70%;
}
.main {
height: 800px;
}
index02.css樣式程式碼
.left,.center,.right {
float: none;
width: 100%;
}