1、媒体查询
link语法
<link href=”CSS文件” type=”text/css” rel=”stylesheet” media=”媒体类型”>
2 @import语法
@import url(CSS文件) 媒体类型
3.@media语法
@media 媒体类型
<html>
<head>
<!-- <link rel="stylesheet" href="print.css" media="print"> -->
<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>