响应式布局

响应式布局

为什么要有响应式布局

越来越多的智能移动设备（ mobile, tablet device ）加入到互联网中来，移动互联网不再是独立的小网络了，而是成为了 Internet 的重要组成部分。响应式网络设计 （ RWD/ AWD）的出现,目的是为移动设备提供更好的体验，并且整合从桌面到手机的各种屏幕尺寸和分辨率，用技术来使网页适应从小到大（现在到超大）的不同分辨率的屏幕。

响应式布局是什么

偶然在知乎上看见一位大佬对这个的解释很直观，就把这张图引过来让大家看看

详情可见这位大佬的知乎

Responsive design，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。

响应式布局，简单点来说，就是把一个页面放在不同的承载媒体上，都会正常显示。

在我们以往接触的都是一些静态页面，但是如果我们将其放在其他媒体上是否能正常显示？这就是响应式布局存在的意义。

实现响应式布局的方案

1.媒体查询

CSS3媒体查询可以往我们的页面在遇到不同的媒体类型时，渲染不同的样式，当重置页面大小时，页面会根据页面的大小重新渲染页面样式。

我们该如何选择屏幕大小断点？

根据上面的图我们可以大致选择一下我们该选择的断点。

我们在使用时需要注意，不管是大屏幕还是小屏幕（移动端或PC端），当屏幕大小变化时，后面的样式会覆盖前面的样式。因此移动端优先使用的是min-width，而PC端使用的是max-width。

当移动端优先时：

/* iphone6 7 8 */
body {
    background-color: yellow;
}
/* iphone 5 */
@media screen and (max-width: 320px) {
    body {
      background-color: red;
    }
}
/* iphoneX */
@media screen and (min-width: 375px) and (-webkit-device-pixel-ratio: 3) {
    body {
      background-color: #0FF000;
    }
}
/* iphone6 7 8 plus */
@media screen and (min-width: 414px) {
    body {
      background-color: blue;
    }
}
/* ipad */
@media screen and (min-width: 768px) {
    body {
      background-color: green;
    }
}
/* ipad pro */
@media screen and (min-width: 1024px) {
    body {
      background-color: #FF00FF;
    }
}
/* pc */
@media screen and (min-width: 1100px) {
    body {
      background-color: black;
    }
}

当PC端优先时：

/* pc width > 1024px */
    body {
        background-color: yellow;
    }
/* ipad pro */
@media screen and (max-width: 1024px) {
    body {
        background-color: #FF00FF;
    }
}
/* ipad */
@media screen and (max-width: 768px) {
    body {
        background-color: green;
    }
}
/* iphone6 7 8 plus */
@media screen and (max-width: 414px) {
    body {
        background-color: blue;
    }
}
/* iphoneX */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 3) {
    body {
        background-color: #0FF000;
    }
}
/* iphone6 7 8 */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 2) {
    body {
        background-color: #0FF000;
    }
}
/* iphone5 */
@media screen and (max-width: 320px) {
    body {
        background-color: #0FF000;
    }
}

2.百分比布局

我们可以通过百分比单位，使得浏览器中的元素随着浏览器的高度变化而变化，，从而实现响应式的效果。类似的我们知道响应式布局中的Bootstrap中的栅格系统就是利用百分比来定义元素的宽高。

/* pc width > 1100px */
html, body { margin: 0;padding: 0;width: 100%;height: 100%;}
aside {
    width: 10%;
    height: 100%;
    background-color: red;
    float: left;
}
main {
    height: 100%;
    background-color: blue;
    overflow: hidden;
}

现在我们必须要知道这个百分比是以什么元素的大小为基准点的：

1. 子元素的基准点的height或width中设置百分比，是相对于子元素的直接父元素，width相对于父元素的width,height相对于父元素的height;

2. 子元素的top和bottom设置百分比，则是相对于直接非static定位（默认定位）的父元素的高度，同样子元素的left和right,与此类似，就是相对于其宽度;

3. 子元素的padding和margin设置百分比时，不论是水平还是垂直，都是相对于直接父元素的width而与height无关;

4. 子元素的border-radius,translate和background-size等等都是相对于自身。

但是这个方式也是有很大的缺点的，就是把简单的布局问题变得更加复杂化了，我们为一个元素设置属性前还需要为父元素设置宽度。这就明显增多了我们布局的任务量。

3.rem布局

rem布局就是为元素设置一个单位，rem。

rem是CSS3新增的单位，并且能够很好的支持于移动端。rem是根据font-size来决定rem的大小的，根元素的font-size,当页面的size改变时，只需要改变font-size的值，即可改变这个单位的大小。

rem响应式的布局思想：

• 一般不要给元素设置具体的宽度，但是对于一些小图标可以设定具体宽度值

• 高度值可以设置固定值，设计稿有多大，我们就严格有多大

• 所有设置的固定值都用rem做单位（首先在HTML总设置一个基准值：px和rem的对应比例，然后在效果图上获取px值，布局的时候转化为rem值)

• js获取真实屏幕的宽度，让其除以设计稿的宽度，算出比例，把之前的基准值按照比例进行重新的设定，这样项目就可以在移动端自适应了

然而，这看起来很好用的布局方式也是有缺点的，就是在这个布局中，CSS样式代码和JS代码需要有一定的耦合性，而且放置的位置有要求，就是改变字体大小的代码必须放置在CSS样式之前。

4.视口单位

css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。各个单位具体的含义如下：

单位	含义
vw	相对于视窗的宽度，1vw 等于视口宽度的1%，即视窗宽度是100vw
vh	相对于视窗的高度，1vh 等于视口高度的1%，即视窗高度是100vh
vmin	vw和vh中的较小值
vmax	vw和vh中的较大值

用视口单位度量，视口宽度为100vw，高度为100vh（左侧为竖屏情况，右侧为横屏情况）。

例如，在桌面端浏览器视口尺寸为650px，那么 1vw = 650 * 1% = 6.5px（这是理论推算的出，如果浏览器不支持0.5px，那么实际渲染结果可能是7px，因为浏览器会向上取整）。
那么vw或者vh很类似百分比单位。

对比中我们可以发现，vw单位与百分比类似，单确有区别，前面我们介绍了百分比单位的换算困难，这里的vw更像"理想的百分比单位"。任意层级元素，在使用vw单位的情况下，1vw都等于视图宽度的百分之一。

vw和%的区别为：

单位	依赖于
%	元素的祖先元素
vh/vw	视口的尺寸

单纯的使用vm和vw单位，是这样子的：

 < div class="mod_nav">
            < nav class="mod_nav_list" v-for="n in 5">
                < a href="#" class="mod_nav_list_item">
                    < span class="mod_nav_list_item_logo">
                < img src="http://jdc.jd.com/img/80">
                    < /span>
                    < p class="mod_nav_list_item_name">导航入口< /p>
                < /a>
            < /nav>
< /div>
.mod_nav {
    background: #fff;
    &_list {
        display: flex;
        padding: vm(15) vm(10) vm(10);
        &_item {
            flex: 1;
            text-align: center;
            font-size: vm(10);
            &_logo {
                display: block;
                margin: 0 auto;
                width: vm(40);
                height: vm(40);
                img {
                    display: block;
                    margin: 0 auto;
                    max-width: 100%;
                }
            }
            &_name {
                margin-top: vm(2);
            }
        }
    }
}

效果是这样子的：

5.图片自适应

图片自适应指的是同一张图片在不同的浏览器宽度下有着不同的大小，即随着浏览器大小的变化，图片大小也跟着压缩，拉伸。

1.使用max-width（图片自适应）

可以使用下面的代码：

img {
    display: inline-block;
    max-width: 100%;
    height: auto;
}

2.使用background-image

.banner{
  background-image: url(/static/large.jpg);
}

@media screen and (max-width: 767px){
  background-image: url(/static/small.jpg);
}

还有两种方法，使用到了引入外部资源，过于繁琐且不经常使用，所以就不做过多的介绍了。