响应式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
• 列中行为左浮动，并添加清除浮动：

"header">
China


"row">

"col-3 menu">

The City
The Food



"col-9">
The City
China is a great country and I love it very much!
Resize the browser window to see how the content respond to the resizing.

响应式 Web 设计 – 媒体查询

• 使用 @media 查询，可以对不同的媒体类型定义不同的样式
• 在设计桌面和其他设备时优先考虑移动端的设计
• 可以创建适应不同设备的方向(横屏landscape、竖屏portrait等)的布局

响应式 Web 设计 - 图片

• 设置图片max-width属性 100%，height属性为 auto,图片会根据上下范围实现响应式功能
• 使用HTML5 picture 标签

"viewport" content="width=device-width, initial-scale=1.0">




    "/statics/images/course/img_smallflower.jpg" media="(max-width: 400px)">
    "/statics/images/course/img_flowers.jpg">

响应式 Web 设计 – 视频(Video)

于使用图片来实现原理相同。

响应式 Web 设计 – 框架

可以使用响应式 Web 设计框架 Bootstrap。