css响应式设计

首先明白一个需求：某网站在大屏幕上时布局如下：

屏幕>1024px

屏幕大小为768px到1024px时实现布局如下：

小于768px时实现如下布局：

实现这几种效果就是响应式布局了。说下实现方式使用css @media分为三种情况：

1.当 @media screen and (max-width:768px)时，及屏幕大小小于768时为一种css样式，

2.当 @media screen and (min-width:768px) and (max-width:1024px)时，及屏幕宽度在768和1024时为一种css样式，

3.当 @media screen and (min-width:1024px)时，屏幕宽度大于1024px时为另一种css样式，

其中有几个重要的地方注意：某些区域width用百分比确定的，例如最下边的每条记录宽度始终为100%，页面上边的几个块开始width为大概30%，后边屏幕宽度改变时为大概50%；不仅如此除了比较小的组件之外，基本都是用width百分比规定大小。

另外：如果屏幕变小时，我们所有地方的字体也要变小怎么办？--rem，em

1.rem的使用方式，在根元素html标签上设置font-size:100%（16px）;那么其他地方使用rem，1rem相当于16px；那么当 @media screen and (min-width:1024px)时，屏幕宽度大于1024px时我们设置html标签font-size:20px;其他地方也会相应变大1rem = 20px,也是实现了响应式，看起来比较舒服；

2.em的使用方式，在当前标签元素设置font-size:16px,在当前标签使用em那么 1em = 16px，如果当前元素没设置font-size，那么1em大小为当前元素继承其他元素的font-size大小。

所以rem， em都为相对大小的单位，区别是参照物不同，我本人更倾向于使用rem。

总结：页面响应式布局实现可以通过css media + rem + 百分比宽度实现