如何实现响应式布局
个人博客文章链接：http://www.huqj.top/article?id=149
一、什么是响应式布局
所谓响应式布局，就是指同一个网页，在不同的终端上的显示效果不同，但是访问的确实是同一个页面，只是因为浏览器会根据终端的不同（例如屏幕宽度、横竖屏、移动端还是pc端等）选择的渲染方式也不同。相信大家做前端页面的时候都会有这样的困惑：一个页面在自己电脑上看着好好的，一旦从别的分辨率不同的终端上访问就会变得面目全非，所以不得已只能将页面元素的宽度写死，这样是一种解决办法，但是给移动端带来的浏览体验是很差的。
百闻不如一见，下面给出两个响应式布局的地址，大家可以用不同终端访问或者调整浏览器的屏幕大小来体验响应式。一个是segmentfault的网站，一个是我自己写的一个简单demo（当然和segment没法比，但是后面会以我做的这个页面讲解如何实现响应式。）
二、如何实现响应式布局
既然响应式布局如此重要，那么如何实现响应式布局呢？根据我的经验，简单来说就是：先做好PC端的样式，然后使用css中的@media媒媒体查询来适配不同的终端。这里有一个比较好的习惯是将页面栅格化，栅格化的意思就是将页面划分成一块一块的区域，然后不同的终端适配就是将栅格重新排列，这个后面会用实例说明，下面先来看看@media的用法：
看下面这个例子：
|
1 2 3 4 5 6 7 8 9 |
|
这个简单的css样式，就是媒体查询的最简单用法，它实现的效果是当终端屏幕宽度大于800px的时候，页面背景是白色，当小于800px的时候，背景变为黑色。当然这个没什么意义，但是只要是写在@media中的样式，当查询条件成立的时候就会覆盖正常的样式，从而就可以实现根据终端不同渲染不同的布局。
因此一般而言设计响应式布局需要遵循以下几点：
①页面元素宽度不用px作为单位，而是尽量使用百分比。
②页面框架之间使用流式布局，也就是用float属性，这样当元素超出屏幕宽度的时候会滑倒下面而不是撑出水平滚动条。
③注意图片的大小，尤其是宽度，同样尽量使用百分比
三、实例
下面结合我所做的一个简单响应式布局页面来做解说。效果图如下：
PC端：
移动端：
首先是页面的布局：最上方一个div是header，包括了Logo和导航栏，然后下面是左右两大块div，左边的称为main,放置主要内容，右边的称之为right-menu，放置侧边栏，同时right-menu还包括若干个（个数可增减）小div，也就是页面上看到的各个小侧边栏。
其中main和right-menu是左浮动的，这样使得两大块div可以浮动到同一行。正常css代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
这里的div宽度和边距都是用百分比来表示的。
PC端的布局写好了之后，就可以开始考虑媒体查询的样式，就这个例子而言，可以调整成如下样式：
①导航栏隐藏，用下拉菜单的方式展示，并且各个导航条目不能放在一行，要分成两行，当然如果导航条目比较多的时候可以多分几行。
②右边的侧栏也就是right-menu调整到main的下面去，实现方式也就是将main的浮动属性清除，同时调整main和right-menu的宽度。
下面是媒体查询的样式：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
|
这里我还调整了图片的宽度，使得一个图片宽度占据的百分比更大，主要是考虑到图片太小在移动端的浏览体验较差。
以上就是一个简单的响应式布局页面制作过程，其实用Bootstrap组件可以实现通用的响应式布局框架，也不用自己再写媒体查询，不过自己从头做一遍更有助于理解。
demo的访问地址在上面，下载源码点击这里，github地址：github项目地址
【参考博客】
https://www.cnblogs.com/dreamsboy/p/5656009.html
http://www.cnblogs.com/yuanziwen/p/6926561.html
标签：css,响应式