一、什么是响应式布局？
就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。
1. 响应式布局的优点？
1）面对不同分辨率设备灵活性强
2）能够快捷解决多设备显示适应问题
2. 响应式布局的缺点？
1）兼容各种设备工作量大，效率低下
2）代码累赘，会出现隐藏无用的元素，加载时间加长
二、 Media Qurey(媒介查询)
设备屏幕的宽和高：device-width device-height
渲染窗口的宽和高：width height
设备的手持方向：orientation
设备的分辨率：resolution
1. 使用方法：
外联
内嵌样式
3.实例
1）当屏幕宽度小于640px时，背景色为灰色，反之则为蓝色
HtML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实现响应式布局效果</title>
<link href="lesson23.css" type="text/css" rel="stylesheet" media="only screen and (max-width:640px)">
<!--only screen and (...)设置当屏幕宽度在640px范围之内时，才会显示css样式-->
<style>
@media screen and (min-width:640px ){
body{
background-color: #6bb2ff;
}
}
</style>
</head>
<body>
</body>
</html>
CSS（lesson23.css）：
*{
margin: 0;
padding: 0;
}
body{
background-color: #cccccc;
}
2）实现当屏幕宽度大于960px时不同的渲染效果。
屏幕宽度大于960px
屏幕宽度在600-960px范围内
屏幕宽度小于600px
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width = device-width,initial-scale = 1">
<title>实现响应式布局效果</title>
<link href="lesson23.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="heading"></div>
<div class="container">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
<div class="footing"></div>
</body>
</html>
CSS：
*{
margin: 0;
padding: 0;
}
.heading,.container,.footing{
margin: 10px auto
}
.heading{
height: 100px;
background-color: chocolate;
}
.left,.right,.main{
background-color: cornflowerblue;
}
.footing{
height:100px ;
background-color: aquamarine;
}
@media screen and (min-width: 960px) {
.heading,.container,.footing{
width:960px ;
}
.left,.main,.right{
float: left;
height: 500px;
}
.left,.right{
width: 200px;
}
.main{
margin:0 5px;
width:550px;
}
.container{
height: 500px;
}
}
@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;
}
}
@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;
}
}
网友评论