响应式WEB设计总结

响应性Web设计理念是：页面的设计与开发应当根据用户行为与设备环境进行相应的相应及调整。

一、 布局方式：

1. 固定布局：固定布局以PX（像素）为单位，页面死板，不适应响应性布局。

2. 流式布局：以百分比作为单位，百分比宽度=目标元素宽度/上下文元素宽度。

3. 弹性布局：弹性布局以em作为单位，百分比尺寸=目标元素尺寸/上下文元素尺寸；现在浏览器默认文字大小是16px。rem也是相对单位，是相对于html根元素来计算的。

二、 媒体查询：

根据特定的环境查询各种属性值，比如设备的宽度，是否横向使用不同的css样式来渲染。

1.  内联样式：宽度在600px到960px之间，@media screen (min-width:600px) and (max-width:960px){}。

     外联样式：使用link标签来引用样式。

2. 理解meta各个属性的含义。

综上，流式布局和弹性布局结合媒体查询是响应式布局的最好方式。