响应式布局
2015-08-31 本文已影响67人
机器猫的百宝袋
1.css中的Media Query(媒介查询)：
- 设备宽高：device-width,device-height
- 渲染窗口的宽高：width，height
- 设备的手持方向：orientation
- 设备的分辨率：resolution
2.使用方法：
- 外联样式
通过<link>关键字导入css文件
- 内嵌样式
通过 在.html 文件中借助<style></style>关键字设置
3.Bootstrap库
通过关键字“@media”实现
举例：
html文件
<head>
<meta charset="UTF-8">
<title>响应式布局</title>
<!-- 外联-->
<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;
}
}
