响应式布局二

Posted 2020-09-21

现在响应式布局用得比较大众的应该是Bootstrap，但是我并不打算使用。原因很简单，我对Bootstrap不熟悉不了解。然后 我简单的看了下Bootstrap是怎么实现的响应式布局。原理很简单，就是使用到了CSS3中的media。media何方神圣？可以用来吃吗？它可以针对不同的媒体类型定义不同的样式，也可以针对不同的屏幕尺寸设置不同的样式。且当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。既然如此，响应式何愁。

在可视区域的宽度小于 600px 的时候被应用。

@media screen and (max-width: 600px) {
  .class {
    background: #0094ff;
  }
}

在可视区域的宽度大于600px 的时候被应用。

@media screen and (min-width: 600px) {
  .class {
    background: red;
  }
} 

简单？对，就是如此简单。您还可以 在600到900直接的启用。

@media screen and (min-width: 600px) and (max-width: 900px) {
  .class {
    background: #0094ff;
  }
}