1.css中的Media Query(媒介查詢)：
- 設備寬高：device-width,device-height
- 渲染窗口的寬高：width，height
- 設備的手持方向：orientation
- 設備的分辨率：resolution
2.使用方法：
- 外聯(lián)樣式
通過<link>關鍵字導入css文件
- 內嵌樣式
通過 在.html 文件中借助<style></style>關鍵字設置
3.Bootstrap庫
通過關鍵字“@media”實現(xiàn)
舉例：
html文件
<head>
<meta charset="UTF-8">
<title>響應式布局</title>
<!-- 外聯(lián)-->
<link rel="stylesheet" type="text/css" href="XXX.css"
media="only screen and (max-width:640px)">
<!-- 內嵌-->
<style>
@media screen and (min-width:640px){
body{
background-color: light coral;
}
}
</style>
</head>
.css文件
/*screen min width 960px*/
@media screen and (min-width: 960px) {
.heading,.container,.footing{
width: 960px;
}
.left,.main,.right{
float: left;
height: 500px;
}
.left,.right{
width: 200px;
}
.main{
margin: 0px 5px;
width: 550px;
}
.container{
height: 500px;
}
}
/*屏幕尺寸min-width: 600px，max-width: 960px*/
@media screen and (min-width: 600px) and (max-width: 960px) {
.heading,.container,.footing{
width: 600px;
}
.left,.main{
float: left;
height: 400px;
}
.right{
display: none;
}
.left{
width: 160px;
}
.main{
width: 435px;
margin-left: 5px;
}
.container{
height: 400px;
}
}
/*屏幕尺寸最大為600px*/
@media screen and (max-width: 600px) {
.heading,.container,.footing{
width: 400px;
}
.left,.right{
width: 400px;
height: 100px;
}
.main{
margin-top: 10px;
width: 400px;
height: 200px;
}
.right{
margin-top: 10px;
}
.container{
height: 420px;
}
}
