12媒体查询和CSS3响应式布局

来源：互联网发布：闪电seo 编辑：程序博客网时间：2024/05/16 14:48

1、媒体查询

link语法

2 @import语法

@import url(CSS文件) 媒体类型

3.@media语法

@media 媒体类型

<html>
<head>


<style>

@media screen{body:{font-size:30px;}}
@media print
{
body{font-size:50px;}
}

</style>
</head>
<body>今天很嗨！！
</body>
</html>

2、CSS3响应式布局

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端—— 而不是为每个终端做一个特定的版本。

<html>
<head>
<style>

*{margin:0;padding:0;}

/* pc */
@media screen and (min-width:960px)
{
.ct{margin:10 auto;}
.ml10{margin-left:10px;}
.mt10{margin-top:10px;}
.fl{float:left;}

.bg1{background:#888;}
.bg2{background:red;}

#head{width:960px;height:120px;}

/*body*/
#body{width:960px;height:500px;}
#body .left{width:220px;height:500px; float:left;}
#body .main{width:500px;height:500px;float:left;margin-left:10px;}
#body .right{width:220px;height:500px;float:left;margin-left:10px;}

/*footer*/
.footer{width:960px;height:80px;}

}

/*平板的*/
@media screen and (min-width:640px) and (max-width:960px)
{

.ct{margin:10 auto;}
.ml10{margin-left:10px;}
.cb{clear:both;}
.fl{float:left;}

.bg1{background:#888;}
.bg2{background:red;}

#head{width:640px;height:60px;}

#body{width:640px;height:400px;}
#body .left{width:230px;height:400px;float:left;}
#body .main{width:400px;height:400px;float:left;margin-left:10px;}
#body .right{display:none;}

.footer{width:640px;height:50px;}

}

@media screen and (max-width:640px)
{

.ml10{margin-left:10px;}
.cb{clear:both;}
.fl{float:left;}

.bg1{background:#888;}
.bg2{background:red;}

#head{width:100%;height:50px;}

#body{width:100%;height:600; margin:10px auto;}
#body .left{width:100%;height:140px;margin-top:10px;}
#body .main{width:100%;height:300px;margin-top:10px;}
#body .right{width:100%;height:140px;margin-top:10px;}

.footer{width:100%;height:40px;}
/*.footer{width: 960px;height: 100px;line-height: 100px;text-align: center;}*/

}

</style>
</head>
<body>

<div id="head" class="bg1 ct">head</div>

<div id="body" class=" ct">
<div class="left bg1 ">left</div>
<div class="main bg1">main</div>
<div class="right bg1">right</div>
</div>

<div class="footer ct bg2">footer</div>

</body>

</html>

0 0