你真的了解响应式布局吗？

曾几什么时候我认为使用了媒体查询就是响应式布局，这种理解实在是太浅薄了，今天就让咱们从新来认识下什么是响应式布局

查看demo

查看源码，欢迎star

什么是响应式布局

前几年风靡一时Bootstrap就是很典型的响应式布局框架，虽然如今已经被淘汰了，可是如今流行的一些UI框架都是借鉴Bootstrap的思想来实现了响应式布局，如Ant Design，Material Design等，能够说Bootstrap开启了响应式布局的时代

我用过几款响应式布局框架，本身也研究过响应式布局的原理，我认为真正的响应式布局应该是：

咱们的网站使用一套代码，兼容多个终端设备，在不一样的设备上会作出不一样的调整，如显示或者隐藏等

点我体验

响应式布局的要点

当你想要实现一个响应式布局，你须要注意如下几点

设置viewport

咱们所作的第一件事就是设置viewport，添加以下代码到你的head标签中

<meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no'>
复制代码

上面这段代码的做用是设置咱们网页的宽度为设备的宽度，初始化缩放为1，而且禁止用户缩放

媒体查询

媒体查询是响应式布局的核心，咱们的网页为何可以根据窗口的大小自动调整样式都是依靠媒体查询

媒体类型

@media all {} // 用于全部设备
@media print {} // 用于打印机
@media screen {} // 用于PC，Pad，Phone
复制代码

媒体特性

媒体特性有如下可选项

媒体特性	取值	接受max或min	描述
width		yes	定义输出设备中的页面可见区域宽度
height		yes	定义输出设备中的页面可见区域高度
device-width		yes	定义输出设备的屏幕可见宽度
device-height		yes	定义输出设备的屏幕可见高度
orientation	portrait,landscape	no	height是否大于width
aspect-ratio		yes	width和height的比率
device-aspect-ratio		yes	device-width和device-height的比率
resolution		yes	定义设备的分辨率
-webkit-device-pixel-ratio		yes	设备像素比

移动优先

移动优先就是咱们写的样式以移动端为主，当随着屏幕宽度增大的时候，后面的样式会覆盖前面的样式，请看下面：

/* 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优先与移动端优先正好相反，咱们编写的样式以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;
    }
}
复制代码

你们注意到没有PC端优先使用的是max-width，而移动端优先使用的是min-width，这个技巧你们有没get到

字体单位

因为咱们要作响应式布局，咱们的字体大小也要随着屏幕的大小进行改变，这时候就不能使用px做为字体单位了，咱们可使用em或者rem，这二者的区别是一个是相对于父元素，一个是相对于html标签。咱们推荐使用rem做为字体单位

默认状况下咱们html标签的font-size为16px，咱们能够利用媒体查询，设置在不一样设备下的字体大小

/* pc width > 1100px */
html{ font-size: 100%;}
body {
    background-color: yellow;
    font-size: 1.5rem;
}
/* ipad pro */
@media screen and (max-width: 1024px) {
    body {
      background-color: #FF00FF;
      font-size: 1.4rem;
    }
}
/* ipad */
@media screen and (max-width: 768px) {
    body {
      background-color: green;
      font-size: 1.3rem;
    }
}
/* iphone6 7 8 plus */
@media screen and (max-width: 414px) {
    body {
      background-color: blue;
      font-size: 1.25rem;
    }
}
/* iphoneX */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 3) {
    body {
      background-color: #0FF000;
      font-size: 1.125rem;
    }
}
/* iphone6 7 8 */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 2) {
    body {
      background-color: #0FF000;
      font-size: 1rem;
    }
}
/* iphone5 */
@media screen and (max-width: 320px) {
    body {
      background-color: #0FF000;
      font-size: 0.75rem;
    }
}
复制代码

百分比布局

用过Bootstrap的同窗都知道，它里面有个栅格系统，说白了就是利用百分比来定义咱们元素宽高，而不直接使用width。css3支持了最大最小宽高，能够将百分比和max(min)一块儿结合使用来定义元素在不一样设备下的宽高

/* 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;
}
/* ipad pro */
@media screen and (max-width: 1024px) {
    aside {
      width: 8%;
      background-color: yellow;
    }
}
/* ipad */
@media screen and (max-width: 768px) {
    aside {
      float: none;
      width: 100%;
      height: 10%;
      background-color: green;
    }
    main {
      height: calc(100vh - 10%);
      background-color: red;
    }
}
/* iphone6 7 8 plus */
@media screen and (max-width: 414px) {
    aside {
      float: none;
      width: 100%;
      height: 5%;
      background-color: yellow;
    }
    main {
      height: calc(100vh - 5%);
      background-color: red;
    }
}
/* iphoneX */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 3) {
    aside {
      float: none;
      width: 100%;
      height: 10%;
      background-color: blue;
    }
    main {
      height: calc(100vh - 10%);
      background-color: red;
    }
}
/* iphone6 7 8 */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 2) {
    aside {
      float: none;
      width: 100%;
      height: 3%;
      background-color: black;
    }
    main {
      height: calc(100vh - 3%);
      background-color: red;
    }
}
/* iphone5 */
@media screen and (max-width: 320px) {
    aside {
      float: none;
      width: 100%;
      height: 7%;
      background-color: green;
    }
    main {
      height: calc(100vh - 7%);
      background-color: red;
    }
}
复制代码

图片自适应

图片自适应意思就是图片能随着容器的大小进行缩放，能够采用以下代码：

img {
    max-width: 100%;
    height: auto;
}
复制代码

max-width保证了图片可以随着容器的进行等宽扩充，而height为auto能够保证图片进行等比缩放而不至于失真

若是是背景图片的话要灵活运用background-size属性

flex，grid，绝对布局，BFC

除此以外还要灵活运用flex布局，grid布局，绝对布局，BFC等

最后

再总结下，实现一个响应式布局咱们要注意如下几点：

• viewport
• 媒体查询
• 字体单位
• 百分比布局
• 图片自适应
• flex，grid，BFC，绝对布局等经常使用技巧

查看demo

查看源码，欢迎star

大家的打赏是我写做的动力