HTML&CSS：浅谈响应式布局&自适应布局

随着经验的增加，响应式这个词对于我们来说肯定都不陌生。下面我试着来做个小总结。欢迎讨论与拍砖~
　　一、响应式布局
　　　1、什么是响应式页面？响应式布局可以一统pc&mobile吗？响应式与自适应式布局的区别？
　　　　ａ、响应式简单来说是一个网站的布局 能够兼容多个不同终端， 而并不是传统的pc端一套页面，移动端一套页面。
　　　　ｂ、当初Ethan Marcotte在2010年5月份提出的这个概念的时候是希望响应式可以一统pc&mobile页面，同时我们也做到了。但是这样带来的问题也越发让开发者心烦意乱，最重要的一点就是兼容各种设备会导致 大量累赘的代码，维护与重构较麻烦。
　　　　ｃ、响应式布局讲究的是使用一套布局代码来在不同终端展示，根据屏幕尺寸的大小对页面的布局进行改造（即当屏幕变小时，开发者可能会让标题栏中原本显示10个子标题现在只显示5个，隐藏剩下的5个或者让其在第二行出现），而自适应布局则相反，它使用一套布局代码不会根据屏幕大小改变还改变布局结构，它只是会等比缩小或者放大对应内容的尺寸。
　　 ２、响应式布局采用的技术
　　　　a、控制视口（viewport）
　　　　　　　控制视口这一点不论是响应式、自适应还是移动端布局都是最重要的。我们常常会使用这一句：

视口宽度等于设备宽度，初始缩放比最大缩放比与最小缩放比均为1，禁止用户缩放。详细描述可查看 MDN-meta。在这里可能有的朋友会见到设备像素比（dpr 即 deivcePixelRatio）也就是物理像素与设备独立像素的比值，常见的有retina屏等。详情可以参考张鑫旭老师的这篇 设备像素比devicePixelRatio简单介绍 文章。
　　　　b、CSS的媒体查询（media query）
　　　　　　　使用@media 查询，你可以针对不同的媒体类型定义不同的样式。请看下例：

@media only screen and (max-width: 480px){
    header .top .tel,
    header .top ul li:nth-child(3),
    header .top ul li:nth-child(4){
        display: none;
    }
}

这个代码片意思是当设备视口宽度达到480px时对 li 于.tel 进行处理。media query的详情可以查看 MDN-media 。这里需要注意的一点是很多人编写响应式布局时都喜欢由pc大屏开始，慢慢到pad再到mobile，这里我建议设计的时候可以从小屏的mobile开始，先确定内容然后逐级向大屏设计。对于IE9以下浏览器我们需要引入一个关于media query 的 polyfill（可以理解为补丁包）， css3-mediaqueries.js 或者 respond.js。
　　　　c、自适应图片等素材
　　　　　　　这里我们常对图片做处理，处理的方法有很多我们可以采用HTML5 picture 标签，利用该标签可以在不同设备中显示不同的图片。如下代码：

          
          
          ![](img/ad001-l.png)
 

source 代表你要显示图片的源，media代表你需要什么条件下显示该图片，srcset 须填写图片路径d s代码片意思是当设备视口宽度大于36rem 时显示 ad001-l-480w.png 这张图片，若小于 36rem 则使用ad001-l-1600w.png 这张图片，要是浏览器不支持 picture 则使用 img 标签中的图片。picture 详细信息可查看 MDN-picture 同样的这里需要注意在 IE9&IE9以下 浏览器想使用 picture 须导入 polyfill ，这里我使用的是 html5shiv.js 。
　　二、自适应布局
　　　１、自适应的布局的前世今生
　　　　很多人还是喜欢把自适应称为百分比布局，而我认为自适应是百分比的增强版，这个概念包括了很多新技术与小技巧而并非单纯的使用百分比实现页面布局。请看下图：

百分比&rem例子.png

这个结构很简单，如下：

            关于我们
            

                 
                 ![](img/indexPage/AUbanner.png)
                

                
            
  
`

对应的样式为：

.container .main{
    width: 90%;
    margin: 0 auto;
}
.container .main .title{
    display: inline-block;
    margin: 1.425rem 0;
    font-size: 1.25rem;
    color: rgb(13,76,187);
}
.container .main .title .icon{
    margin-right: 1rem;
    vertical-align: middle;
}
.container .main .icon{
    display: inline-block;
    width: .25rem;
    height: 1.3rem;
    background: url(../img/indexPage/mainBtn.png);
}
.container .main .mainText img{
    width: 100%;
    height: 100%;
}
.container .main .content{
    margin: 1.2rem 0 1.425rem 0;
    text-indent: 1.7rem;
    font-size: .9rem;
    line-height: 1.35rem;
    color: #3d3d3d;
}

在项目中更多的使用的都是组合计，百分比控制各个容器的宽和少量的高度，用 rem 来控制 padding/margin/font/height 等。至此，利用百分比布局的方式即“前世”，而“今生”则是在不断的混合新的技术不断增强。对于今生，显然我们还有 web App 没有说，那我们就来看看移动端的 web 页面。
2、rem
上面出现了一个单位rem，那么rem到底是什么？rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。
对于一个网页来说，rem的初始值为 16px，当然这个值是可以根据当前项目中的需要来改变的，设置html的font-size即可。比如说：拿到了一份宽度为680px，rem为20px的设计稿其中某元素宽度为200px，但是如果要在宽度为375与414的屏幕上显示，那么我们应该设置为多少呢？

宽度	宽度比	html font-size	某元素宽度(px)	某元素宽度(rem)
384	384/640=0.6	12px	120px	10rem
480	480/640=0.75	15px	150px	10rem

重点是要计算出html的font-size，如果是retina屏还需注意dpr。如果我们想快速上手不想计算的话可以引入flexible.js，这个脚本主要是根据媒体查询来动态设置html font-size，兼容性还不错。
　　　3、webApp 中的自适应利器 - flex弹性布局
　　　　由于 media query 的出现影响了很大一部分开发人员，所以在早些时候的 webApp 页面中还是会出现众多的 media query 。直到 flex 流行开来后我们逐步认识到 flex 的强大，因为 flex 上手简单，代码精简，一小段就可以完成我们常说的“圣杯布局”等，也可以完成常考的水平垂直问题。关于 flex 大家可以参考阮一峰老师的教程，讲解的十分详细。Flex 布局教程：语法篇。请看下例：

flex-pc.png

flex-ip6.png

flex-ipad.png

顺手拉来自己练手的 vue2 中用 flex 布局后的页面，可以看到 pc&mobile 完美驾驭。因为目前各大浏览器对 flex 的支持度在增加所以 pc&mobile 均可使用就在不久的将来 ，不过一般还是更多的用在移动端。