CSS 响应式设计
Viewport
- viewport 是用户网页可视区域
设置Viewport
- width:控制viewport 大小,可以指定一个值(600px),或特殊的值,如:device-width为设备的宽度
- height: 高度
- initial-scale: 初始缩放比例,也就是页面第一次load时候缩放比例
- maximum-scale: 允许用户缩放到的最大比例
- minimum-scale: 允许用户缩放到的最小比例
- user-scalable:用户是否可以手动缩放
网格视图
很多网页是按列来布局的,通常是12列,宽度100%,在浏览器窗口大小调整时自动伸缩。
确保所有的HTML 元素都有box-sizing 属性且设置为border-box。
* {box-sizing: border-box; }
12列网格系统可以更好的控制响应式网页
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.row:after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color :#33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
</style>
</head>
<body>
<div class="header">
<h1>Chania</h1>
</div>
<div class="row">
<div class="col-3 menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="col-9">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
</div>
</body>
</html>
媒体查询
使用@media 查询,可以针对不同的媒体类型定义不同的样式
窗口小于500px,
@media only screen and (max-width:500px){
[class*="col-"]{
width:100%;
}
}
横屏
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
图片
添加图片
使用width 属性设置为100%,图片会根据上下范围实现响应式功能。
img { width:100%, height:auto;}
如果设置max-width 属性设置为100%,图片永远不会大于其原始大小
img {max-width:100%; height:auto;}
背景图片
背景-简写属性
背景颜色的简写属性为”background”:
body {background: #fff url('img_tree.png') no-repeat right top;}
当使用简写属性时,属性值的顺序为:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
背景图片可以响应调整大小或缩放
如果background-size 属性设置为“contain”,背景图片将按比例自适应内容区域。图片保持其比例不变
div { width: 100%; height: 400px; background-image: url('img_flowers.jpg'); background-repeat: no-repeat; background-size: contain; border: 1px solid red; }
如果background-size 属性设置为 “100% 100%”,背景图片将延展覆盖整个区域(I love this)
div { width: 100%; height: 400px; background-image: url('img_flowers.jpg'); background-size: 100% 100%; border: 1px solid red; }
如果background-size 属性设置为 “cover”, 背景扩展,完全覆盖背景区域,还保持图片的比例,某些部分可能无法显示在背景定位区域
div { width: 100%; height: 400px; background-image: url('img_flowers.jpg'); background-size: cover; border: 1px solid red; }
不同设备显示不同的图片
大尺寸图片可以显示在大屏幕上,但在小屏幕上不能很好显示.没有必要在小屏幕上加载大图片,所以根据不同的设备显示不同的图片
/* For width smaller than 400px: */
body {
background-image: url('img_smallflower.jpg');
}
/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
body {
background-image: url('img_flowers.jpg');
}
}
也可以使用min-device-width 代替 min-width 属性,它检测的是设备宽度而不是浏览器宽度,当浏览器大小重置时,图片大小不会改变。
/* 设备小于 400px: */
body {
background-image: url('img_smallflower.jpg');
}
/* 设备大于 400px (也等于): */
@media only screen and (min-device-width: 400px) {
body {
background-image: url('img_flowers.jpg');
}
}
HTML 5 picture 元素
在body元素里设置
<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 400px)">
<source srcset="img_flowers.jpg">
<img src="img_flowers.jpg" alt="Flowers">
</picture>
视频
width
当width 属性设置为100%, 视频播放器会根据屏幕大小自动调整比例:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
video {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<video width="400" controls>
<source src="/statics/demosource/mov_bbb.mp4" type="video/mp4">
<source src="/statics/demosource/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<p>调整浏览器窗口大小查看视频播放器变化</p>
</body>
</html>
max-width属性
如果max-width 属性设置为100%,视频播放器会根据屏幕自动调整比例,但不会超过其原始大小:
video{
max-width:100%
height:auto;
}
Bootstrap
来自Twitter,最受欢迎的前端框架之一,基于HTML, CSS, JAVASCRIPT,
它简洁灵活,是的web开发更加快捷
自己实现
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.row:after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
}
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color :#33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
.aside {
background-color: #33b5e5;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
background-color: #0099cc;
color: #ffffff;
text-align: center;
font-size: 12px;
padding: 15px;
}
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
</style>
</head>
<body>
<div class="header">
<h1>Chania</h1>
</div>
<div class="row">
<div class="col-3 col-m-3 menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="col-6 col-m-9">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
</div>
<div class="col-3 col-m-12">
<div class="aside">
<h2>What?</h2>
<p>Chania is a city on the island of Crete.</p>
<h2>Where?</h2>
<p>Crete is a Greek island in the Mediterranean Sea.</p>
<h2>How?</h2>
<p>You can reach Chania airport from all over Europe.</p>
</div>
</div>
</div>
<div class="footer">
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
</body>
</html>
使用bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style type="text/css">
*{
box-sizing:border-box;
}
.row:after{
content:"";
clear:both;
display:block;
}
.jumbotron{
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
padding: 8px;
margin-bottom: 7px;
background-color :#33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
li:hover {
background-color: #0099cc;
}
.aside {
background-color: #33b5e5;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
background-color: #0099cc;
color: #ffffff;
text-align: center;
font-size: 12px;
padding: 15px;
}
</style>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Chania</h1>
</div>
<div class="row">
<div class="col-sm-4">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="col-sm-4">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
</div>
<div class="col-sm-4">
<div class="aside">
<h2>What?</h2>
<p>Chania is a city on the island of Crete.</p>
<h2>Where?</h2>
<p>Crete is a Greek island in the Mediterranean Sea.</p>
<h2>How?</h2>
<p>You can reach Chania airport from all over Europe.</p>
</div>
</div>
</div>
</div>
<div class="footer">
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
</body>
</html>
在标签内部使用class, 可以有多个值如:
<div class="col-3 col-m-3 menu">