响应式

最近这段时间在做响应式网页，同时也是一个项目，对于这段时间做的项目做一些总结。

这几天做的响应式都没有写媒体查询<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />，因为网页布局不需要这个，但是今天我在翻前几个项目时（因为目前这个项目需要先做）发现，当页面不的宽度不是100%或者规定为12.8rem的时候，这个时候就不能使用目前的方法了，因为当浏览器窗口缩小的时候整个页面就乱掉了，这个时候就需要媒体查询了，写媒体查询的时候，就需要对CSS样式在不同的屏幕尺寸进行更改，比如说：960px、750px、320px,这样就要求我需要把相同的css属性写三遍。

今天遇到一个问题，先来看看效果

********************************************************************************************************************************************************************************************

下面是HTML代码

********************************************************************************************************************************************************************************************

通过代码可以看到最外围是一个div,包裹一个span标签span标签里面放了一张图片和一个i标签，要求是把这两个元素对齐，当时出现的情况是：这个i标签里的文字要稍微低于前面的img，试了很多办法margin、padding、 line-height，但是依旧没用，后来的解决办法是定位，如下图的代码：