响应式布局实例1
响应式布局实例1
通过媒体查询设置不同的断点，为不同的视图宽度指定不同的css规则，让浏览器根据指定的视图宽度渲染页面，来实现响应式布局。
可以根据需要，添加任意多个媒体查询断点，例如，希望在视口宽度小于等于480px时，将main和aside的宽度设置为auto并取消浮动，让他们全屏显示。
使用@media 的三种方式：
第一： 直接在CSS文件中使用
@media 类型 and (条件1) and (条件二){
css样式
}
@media screen and (max-width:980px ) {
body{
background-color: red;
}
}
第二：使用@import导入
@import url("css/index.css") all and (max-width:980px);
第三：也是最常用的：使用link连接，media属性用于设置查询方式
<link rel="stylesheet" type="text/css" href="css/index.css" media=“all and (max-width=980px)”/>
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<style type="text/css">
#wrapper{
margin: 10px auto;
overflow: hidden;
}
header,main,aside,footer{
height: 40px;
border: 1px solid #ccc;
}
main{
width: 78%;
float: left;
}
aside{
width: 20%;
float: right;
}
@media screen and (max-width: 480px){
main{
width: auto;
float: none;
}
aside{
width: auto;
float: none;
margin-top: 10px;
}
}
</style>
</head>
<body>
<header>头部区域</header>
<div id="wrapper">
<main>主内容区</main>
<aside>侧边栏</aside>
</div>
<footer>页脚区域</footer>
</body>
</html>我们改变浏览器窗口大小，在窗口大小小于等于480的时候，效果如下所示：
在窗口大小 大于480的时候，main和aside在一行内显示，并各占1栏，宽度分别为78%和20%，效果如下所示：
