如何实现响应式布局

个人博客文章链接：http://www.huqj.top/article?id=149

一、什么是响应式布局

    所谓响应式布局，就是指同一个网页，在不同的终端上的显示效果不同，但是访问的确实是同一个页面，只是因为浏览器会根据终端的不同（例如屏幕宽度、横竖屏、移动端还是pc端等）选择的渲染方式也不同。相信大家做前端页面的时候都会有这样的困惑：一个页面在自己电脑上看着好好的，一旦从别的分辨率不同的终端上访问就会变得面目全非，所以不得已只能将页面元素的宽度写死，这样是一种解决办法，但是给移动端带来的浏览体验是很差的。

    百闻不如一见，下面给出两个响应式布局的地址，大家可以用不同终端访问或者调整浏览器的屏幕大小来体验响应式。一个是segmentfault的网站，一个是我自己写的一个简单demo（当然和segment没法比，但是后面会以我做的这个页面讲解如何实现响应式。）

    SegmentFault  响应式布局简单demo

 

二、如何实现响应式布局

    既然响应式布局如此重要，那么如何实现响应式布局呢？根据我的经验，简单来说就是：先做好PC端的样式，然后使用css中的@media媒媒体查询来适配不同的终端。这里有一个比较好的习惯是将页面栅格化，栅格化的意思就是将页面划分成一块一块的区域，然后不同的终端适配就是将栅格重新排列，这个后面会用实例说明，下面先来看看@media的用法：

    看下面这个例子：

1 2 3 4 5 6 7 8 9

body {     background: white; }   @media screen and (max-width: 800px) {     body{         background: black;     } }

    这个简单的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

.main {         width: 50%;         background: white;         float: left;         margin-left: 11%;         padding: 1rem;         font-size: 1rem;     }          .right-menu {         margin-left: 3%;         width: 25%;         float: left;     }

    这里的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

/*当设备宽度小于800px的时候切换成移动端的布局*/     @media screen and (max-width: 800px) {         .header img {             width: 15%;             height: 15%;         }         .main {             float: none;             width: 95%;             margin: 0 auto;             box-sizing: border-box;         }         .right-menu {             padding: 0;             float: none;             width: 95%;             margin: 20px auto;         }         .main img{             width: 40%;         }         .menu img {             width: 40%;         }         .nav-bar .m-menu-toggle {             display: inline;         }         .nav-bar ul {             display: none;         }     }

    这里我还调整了图片的宽度，使得一个图片宽度占据的百分比更大，主要是考虑到图片太小在移动端的浏览体验较差。

 

    以上就是一个简单的响应式布局页面制作过程，其实用Bootstrap组件可以实现通用的响应式布局框架，也不用自己再写媒体查询，不过自己从头做一遍更有助于理解。

    demo的访问地址在上面，下载源码点击这里，github地址：github项目地址

 

---

 

【参考博客】

https://www.cnblogs.com/dreamsboy/p/5656009.html

http://www.cnblogs.com/yuanziwen/p/6926561.html 

标签：css,响应式