响应式布局-易微帮

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

因为当初是移动互联发展的初期，但是现在移动互联已经发展的特别好了，然后PC端网站慢慢被削弱。因此现在大部分的产品优先移动端，PC端被削弱，然后响应式就没有以前那么火了。

现在诸如小米，淘宝，京东等一些网站都是既实现了PC端，又实现了移动端，是两套代码。像少数派，就是一套代码，可以在任意的设备中进行使用。

我们可以根据网页的宽度，来让一些样式生效。利用@media媒体查询属性，来实现，在不同的网页宽度中实现不同的样式。

在我们的f12移动仿真模式中，可以开启一个工具。

显示媒体查询，在后续的操作中，可以帮助我们解决一些问题

这个属性可以控制我们的设备类型，在最新的标准中，这些属性都被删除了，只剩all screen print speech。但是我们要写把重点放在浏览器宽度的变化上

@media (max-width: xxxpx) {
  /* 样式 */
}

代表在小于等于xxxpx的分辨率下对应样式生效

@media (min-width: xxxpx) {
  /* 样式 */
}

代表在大于等于xxxpx的分辨率下对应样式生效

@media (max-width: 1000px) and (min-width: 100px) {
  /* 样式 */
}

代表在大于等于100px并且小于等于1000px的分辨率下对应样式生效。

在做响应式布局时，正规情况下，我们需要有对应不同情况下的设计图。一般情况下，我们甚至连设计师都没有。

至少要有一下几种设备，PC 平板手机端

PC 1200px以上

小显示器 1200px以下 992以上

平板 992以下 768以上

手机 768以下

横屏

@media (orientation: landscape) {}

竖屏

@media (orientation: portrait) {}

还可以利用bootstrap框架的栅格布局进行响应式开发，基本上一些ui框架都有带，可以去看看官方文档，基本上没必要手撸原生css的响应式，因为你要写多套样式，比较浪费时间，当然你要时间充足当我没说。

有收获就点个赞吧！

本文含有隐藏内容，请开通VIP 后查看

响应式布局