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>