做响应式布局中的一些收获

响应式布局中响应的方式

1、Media Query（媒体查询）
Media Query的主要作用是根据不同的分辨率去调整一些不同的样式。由于目前主流的移动设备都基于ios和Android，这两者的自带浏览器都是webkit内核，因此我们可以使用viewport属性和Media Query技术实现响应式网页。通过这一方法，我们能实现让基准字号font-size在不同分辨率下显示不一样的内容。

2、Fluid grid（流式布局）

Fluid grid也称流体布局，就是在PC端实现的基础上将一些元素的狂傲由固定调整为弹性制的百分比或是字体比例等。使用Fluid grid的网站能够根据屏幕宽度自动调整页面中每列的宽度，从而保证页面始终处于完整展现的状态，并且实现原有的基本功能。

3、Flex box（弹性布局）

Flex box是CSS3新添加的一种模型属性，它的出现有力的打破了我们常常使用的浮动布局、实现垂直等高、水平均分、按比例划分，可以实现许多我们之前做不到的自适应布局。如果你希望网站能以webapp的外观呈现在手机用户面前，那么，Flex box就是个不错的方式。Flex box和APP的结构很类似，头部底部全部固定，而中间部分的高度实现自适应。

在做响应式网站中通常这三种方式我都会用到，首先说媒体查询，这个是做响应式的最主要手段，原理是根据不同的设备尺寸来加载不同的css代码块来实现响应，然后流式布局最常用到时是bootstrap框架中的栅格系统，就是利用元素浮动的特点来实现块的流动，当一行元素占满位置时，下一个元素会自动换到下一行。弹性布局是css3属性，很适合响应式网页，排布方式非常多样，可以轻易实现垂直居中，多列对齐、等高、自适应宽度等等，具体可以参考Flex 布局教程：语法篇，还有在响应式布局中字体尺寸可以使用em单位、rem单位，这样可以节省很多没有必要的字体调整时间，修改字体只需要修改一下根元素body的字号就能实现整个页面的字号的同比例更换，参考彻底弄懂css中单位px和em,rem的区别