响应式Web基础

《响应式Web》(The Responsive Web) 学习笔记一

开创性技术文章： 《Responsive Web Design》(Ethan Marcotte)

响应式Web设计的理念是：页面的设计与开发应根据用户行为以及环境设备（系统平台，屏幕尺寸，屏幕定向等）进行相应的响应和调整。

响应式Web设计三剑客：

1. 流式布局：以百分比为单位。如Bootstrap
2. 媒体查询：设备类型，分辨率，屏幕物理尺寸及色彩等
3. 弹性图片：图片可以根据当前的视窗自适应展示，包含图片，图标，图表及视频等

设计模式

1. 设备优先：断点为了适应各种设备的宽度值，基于设备；
2. 移动优先：根据内容的可读性，易读性来确定断点，从而无视设备。设计模式是基于内容的。

开发流程

    响应式Web讲究适配性。团队间需要迭代和改进彼此的工作方式，用户体验和开发不断进行迭代。迭代周期中会不断交付和验证成果。
    通过专注于适配并为网站提供一个
流式布局，网站将获得如下几点好处。

• 能够适配不同屏幕大小的布局技术；
• 使网站具有更快的响应速度–基于移动优先的原则，加载时间是开发时考虑的第要素。网站响应速度越快越好；
• 更简单的跨浏览器开发–用流式的CSS能更加简单地解决跨浏览器地布局问题。

媒体查询

<link rel="stylesheet" type="text/css" media="handheld" href="sansserif.css">

上述方式可以限制页面的CSS文件数量。

Foundation:快速制作网站的前端框架

• 官方网站
• 菜鸟教程-Foundation

快速原型

• 五种典型开发周期模型（瀑布、V、原型化、螺旋、迭代）
• 百度百科-快速原型模型

响应式布局基础

• CSS盒模型
• 在CSS中使用百分比
• 容器，整分与等分
      移动网络的核心是它能够将整个页面进行整分，二等分和四等分。等分处理取决于它们的优先级和它们是如何跟页面的其他内容相互作用的。
• 可缩放的图像
      使用<figure>标签，更合乎作为图片容器的语义。

    figure{ width:100%; }    figure img{        width:100%;    max-width:1000px;        height:auto;        display:block;        margin:0 auto;    }

• 强大易变的em

    1em = 16px;    em是级联的。浏览器有一个默认的字体大小，通常是16px.

• Web排版
      WEB设计中的排版
      零基础也能看懂！写给设计师的前端小知识之网页排版（附实战）
• CSS reset
      CSS reset 样式表是给不同的浏览器一套统一的元素默认样式的CSS规则。
• CSS 权重
      你应该知道的一些事情——CSS权重