响应式布局实例2
响应式布局实例2
响应式网页，只用CSS也能实现响应式网站的布局。
通过媒体查询设置不同的断点，为不同的视图宽度指定不同的css规则，让浏览器根据指定的视图宽度渲染页面，来实现响应式布局。
可以根据需要，添加任意多个媒体查询断点，例如，希望在视口宽度小于等于980px时，将body背景设置为红色显示。
CSS中的媒体查询，设置断点。
使用@media 的三种方式：
第一： 直接在CSS文件中使用
@media 类型 and (条件1) and (条件二){
css样式
}
@media screen and (max-width:980px ) {
body{
background-color: red;
}
}
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">
*{
margin: 0;
padding: 0;
}
body{
background-color: skyblue;
}
@media only screen and (max-width: 980px){
body{
background-color: red;
}
}
</style>
</head>
<body>
</body>
</html>预览效果如下所示:
第二：使用@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)”/>
我们需用到width衍生出的max-width这个属性，定义输出设备中的页面可见区域宽度来控制该改变的样式。
需要大家牢记几点：
viewport
viewport 是用户网页的可视区域。
viewport 翻译为中文可以叫做"视区"。
手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。
----------------------------------------------------------------------------------------------
width=device-width
width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
----------------------------------------------------------------------------------------------
initial-scale=1
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
----------------------------------------------------------------------------------------------
user-scalable=no
user-scalable：用户是否可以手动缩放。
----------------------------------------------------------------------------------------------
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
下面制作一个响应式布局页面
htmlcss：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
font-family: "微软雅黑";
}
#head,#main,#foot{
width: 1200px;
height: 100px;
line-height: 100px;
background-color: goldenrod;
margin: 0 auto;
font-size: 48px;
text-align: center;
}
#head div{
width: 100px;
height: 30px;
line-height: 30px;
background-color: green;
font-size: 20px;
margin-top: 35px;
float: right;
display: none;
}
#head ul{
width: 80%;
}
#head ul li{
width: 20%;
text-align: center;
list-style-type: none;
font-size: 20px;
float: left;
}
#main{
height: auto;
margin: 10px auto;
overflow: hidden;
}
.left,.center,.right{
width: 20%;
height: 600px;
line-height: 600px;
background-color: red;
float: left;
}
.center{
width: 60%;
box-sizing: border-box;
border-left: 10px solid #fff;
border-right: 10px solid #fff;
}
@media only screen and (max-width: 1200px) {
#head,#main,#foot{
width: 100%;
}
}
@media only screen and (max-width: 980px) {
.left{
width: 30%;
}
.center{
width: 70%;
border-right: hidden;
}
.right{
display: none;
}
}
@media only screen and (max-width: 640px) {
.left,.center,.right{
width: 100%;
height: 200px;
line-height: 200px;
display: block;
}
.center{
height: 600px;
line-height: 600px;
border: hidden;
border-top: 10px solid #fff;
border-bottom: 10px solid #fff;
}
#head ul{
display: none;
}
#head div{
display: block;
}
}
</style>
</head>
<body>
<header id="head">
<ul>
<li>header1</li>
<li>header2</li>
<li>header3</li>
<li>header4</li>
<li>header5</li>
</ul>
<div>icon</div>
</header>
<section id="main">
<div class="left">
left
</div>
<div class="center">
center
</div>
<div class="right">
right
</div>
</section>
<footer id="foot">
footer
</footer>
</body>
</html>
