响应式布局
就是一个网站能够兼容多个终端,而不是为每一个终端做一个特定的版本,如PC,手机,平板。
优点:
1.面对不同的分辨率设备灵活性强
2.能够快速的解决多设备显示的适应问题
3.适合中小型网站
缺点:
1.兼容于各种设备工作量大,效率降低
2.代码累赘,以及加载事件过长
原理:
通过C3的媒体查询来定制某个宽度区间的网页布局
媒体查询:能检测我们设备的宽度,通过不同的宽度显示不同的样式
超小屏幕 (移动设备 手机) (<768px)
小屏幕 (版本设备 平板) (≥768px)
中等屏幕 (标屏设备 桌面显示器) (≥992px)
大屏幕 (宽屏电脑 大桌面显示器) (≥1200px)
语法:
@media 媒体类型 关键字 媒体特性(即媒体条件) {样式代码}
@media screen and (min-width:768px) and (max-width:992px){
//屏幕满足769-992px之间时的样式设置,注意:and后必须有空格}
@media screen and (min-width: 768px){}
@media screen and (min-width: 992px){}
@media screen and (min-width: 1200px){}
或者
@media (max-width: 767px){}
@media (min-width: 768px) and (max-width: 991px){}
@media (min-width: 992px) and (max-width: 1199px){}
@media (min-width: 1200px){}
如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.content{
width: 1000px;
height: 500px;
margin: 0 auto;
background-color: #ccc;
transition: all 1s;
}
/*@media screen and (max-width: 768px){
.content{
width: 100%;
background-color: pink;
}
}
@media screen and (min-width: 768px) and (max-width: 992px){
.content{
width: 750px;
background-color: cyan;
}
}
@media screen and (min-width: 992px) and (max-width: 1200px){
.content{
width: 970px;
background-color: orange;
}
}
@media screen and (min-width: 1200px){
.content{
width: 1170px;
background-color: green;
}
}*/
/*媒体查询的原理:就和样式覆盖的原理一样,当条件条件成立时执行*/
/*可简写为*/
//768px以下显示conten的背景 background-color: #ccc;
@media screen and (min-width: 768px) {
/*平板*/
.content{
width: 750px;
background-color: cyan;
}
}
@media screen and (min-width: 992px){
/*标屏*/
.content{
width: 970px;
background-color: orange;
}
}
@media screen and (min-width: 1200px){
/*宽屏*/
.content{
width: 1170px;
background-color: green;
}
}
</style>
</head>
<body>
<div class="content"></div>
</body>
</html>