响应式Web设计基础-金旭亮.PDFVIP

响应式Web设计基础 北京理工大学计算机学院 金旭亮 当前时代的技术背景 “移动浪潮”滚滚而来…… 2007年以前，大家主要使用PC和笔 记本访问Web，2007年，iPhone发 布，是Web设计的一个转折点，因 为它意味着一个新的移动互联时代 的到来。 2010年，apple发布iPad，智能手 机和平板电脑开始有了一个爆炸性 的增长，成为访问互联网的主要方 式。 2007年之后，移动用户的增长速度 移动互联时代Web的特点 One Web 如何应对？ 当鸵鸟：就当移动用户不存在…… Many Screens 当苦力：针对PC用户和移动用户各开发一个Web应 用，双倍的工作量！ 要满足所有用户：为iOS、Android 、Windows Phone开发独立的Native App ，恐怖的工作量！ 折衷的选择：只写一个Web应用，但让它能同时 在手机和PC上都有不错的体验。 响应式Web设计概述 回顾一下Web设计的历史 纯文本： 图像 + Table CSS + Div 响应式设计 HTML + HTML Table时代 早期主要用Table进行布局，将整 个页面看成是一张大表，然后， 在单元格中放置各种HTML元素。 Div + CSS时代的“960”套路 页面使用960像素进 行设计，能够很方便 地将页面分为8 列、12 列或16 列，从而简化 网页内容 具体位置的计算。 屏幕 960像素 固定宽度的设计（Div + CSS时代的主流设计方案） 随着屏幕的增大，页面主体内 容宽度不变，但左右边距增大， 内容始终居中。 固定宽度的设计在移动互联时 代行不通！ 传统的固定宽度的页 面，在手机上显示时， 文字小得无法辨认， 按钮也难以点击。 现代手机浏览器都支 持放大，但放大之后， 你不得不上下左右移 动以阅读文章，看书 看得很辛苦。 屏幕太大了也是件麻烦事…… 然而，现在有不少智能电视也可以上 网，电视屏幕通常很大，访问这种固 定宽度的网页，两边会有很大的空白， 对于“完美”一族来说，这种网页看