响应式布局

一、什么是响应式布局

所谓响应式布局，就是指同一个网页，在不同的终端上的显示效果不同，但是访问的确实是同一个页面，只是因为浏览器会根据终端的不同（例如屏幕宽度、横竖屏、移动端还是pc端等）选择的渲染方式也不同。

二、如何实现响应式布局

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

@media的用法

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代码：

.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的宽度。

下面是媒体查询的样式：

/*当设备宽度小于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组件可以实现通用的响应式布局框架，也不用自己再写媒体查询，不过自己从头做一遍更有助于理解。