响应式Web设计
介绍
- 响应式 Web 设计让你的网页能在所有设备上有好显示
- 响应式 Web 设计只使用 HTML 和 CSS
- 响应式 Web 设计不是一个程序或Javascript脚本
总之，页面的设计与开发根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整称之为响应式 Web 设计。
响应式 Web 设计 - Viewport
viewport 是用户网页的可视区域。
设置 Viewport
常用的移动网页优化过的页面的 viewport meta （head中定义）标签大致如下：
- width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）
- height：和 width 相对应，指定高度
- initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例
- maximum-scale：允许用户缩放到的最大比例
- minimum-scale：允许用户缩放到的最小比例
- user-scalable：用户是否可以手动缩放
响应式 Web 设计 – 网格视图
- 一般网页是按列来布局的
- 响应式网格视图通常是 12 列，宽度为100%，在浏览器窗口大小调整时会自动伸缩。
W3C-响应式网格视图
创建网格式布局
- 确保所有的 HTML 元素都有 box-sizing 属性且设置为 border-box
- 确保边距和边框包含在元素的宽度和高度间
- 每列的百分比: 100% / 12 列 = 8.33%
- 在每列中指定 class， class=“col-” 用于定义每列有几个 span
- 所有的列向左浮动，间距(padding) 为 15px
- 每一行使用
包裹。所有列数加起来应为 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>China</h1>
</div>
<div class="row">
<div class="col-3 menu">
<ul>
<li>The City</li>
<li>The Food</li>
</ul>
</div>
<div class="col-9">
<h1>The City</h1>
<p>China is a great country and I love it very much!</p>
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
</div>
</body>
</html>
响应式 Web 设计 – 媒体查询
- 使用 @media 查询，可以对不同的媒体类型定义不同的样式
- 在设计桌面和其他设备时优先考虑移动端的设计
- 可以创建适应不同设备的方向(横屏landscape、竖屏portrait等)的布局
响应式 Web 设计 - 图片
- 设置图片max-width属性 100%，height属性为 auto,图片会根据上下范围实现响应式功能
- 使用HTML5 picture 标签
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<picture>
<source srcset="/statics/images/course/img_smallflower.jpg" media="(max-width: 400px)">
<source srcset="/statics/images/course/img_flowers.jpg">
</picture>
</body>
</html>
响应式 Web 设计 – 视频(Video)
于使用图片来实现原理相同。
响应式 Web 设计 – 框架
可以使用响应式 Web 设计框架 Bootstrap。
