响应式设计的一点儿基本概念

width是目前大多数浏览器所支持的唯一媒体特性，它也基本上是响应式设计目前所用到的唯一媒体特性。

1.关于断点：

断点是响应式设计的重要概念，我们可以用媒体查询在断点处改变布局设计，使设计产生两个（或更多）的变体。考量它的一个好办法是把所有可能的屏幕尺寸想象成一排，一端是最窄的屏幕，一端是最宽的屏幕。

如何选择断点？
在一开始时最好不要只考虑页面设计在特定设备上的显示效果，而是应该从更通用的的访问设备，比如手机尺寸、平板电脑尺寸及桌面显示器尺寸去考虑它。**重要的是设计在每个设计范围中的显示效果，而不是在每个断点上的显示效果**

2.关于设计范围：

虽然断点十分重要，但他们只是代表了一小部分的视口宽度，而我们的设计应该在任何宽度下都有良好的显示效果，因此就要引入设计范围的概念了。所谓的设计范围实际上是指

两个断点间所涵盖的屏幕尺寸范围。**各个设计范围获得各自不同的布局设计变体**

———- 构建响应式网站的最佳方式 —-渐进增强

渐进增强的理念是从最基本的开始，然后在此基础上为具有更强性能的浏览器和设备添加功能。默认设计是针对最小的屏幕，同时它也需要适应那些无法识别媒体查询，CSS3和JavaScript的设备。具体步骤如下：

从内容入手，以HTML定义其语义结构。

表现层，用CSS样式化页面上的内容。

行为层，用JavaScript实现。

核心理念：从最低标准开始，然后为每个人进行设计。

如何决定内容出现在页面上的位置？

使用网格系统，关于网格系统。网格系统是创建一个设计精良网页的关键