Flexbox创建响应式布局

响应式布局

媒体查询通常用于响应式设计，以便根据屏幕大小显示不同设备的布局。这是因为在较小的屏幕上显示时，某些布局总是看起来像被拉伸过（甚至被挤下去）。

可以使用媒体查询将布局设置为宽屏幕（台式机，笔记本电脑等），中等尺寸屏幕（平板电脑，大型手机）以及小尺寸屏幕（手机等）。

对布局添加媒体查询，以便在较小的设备/屏幕上以不同的方式显示：

结构：

<!-- 1.1 -->
<header>header</header>
<div id="main">
  <article>article</article>
  <nav>nav</nav>
  <aside>aside</aside>
</div>
<footer>footer</footer>

样式：

/* 1.2 */
*{
  box-sizing: border-box;
}
body{
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  margin: 0;
}
#main{
  display: flex;
  flex: 1;
}
#main > article{
  flex:1;
}
#main > nav, #main >aside{
  background-color: beige;
}
#main > nav{
  order: -1;
}
header, footer{
  height: 20vh;
  background-color: yellowgreen;
}
header,footer,nav,article,aside{
  padding: 1em;
}
/* 2.1 */
@media screen and (max-width: 575px) {
  #main{
    display: block;
  }
}

结果：

将display: flex改为display: block之后元素会按编码顺序堆叠在一起。

如果不希望按编码顺序排列可以这样做：

/* 2.1 */
@media screen and (max-width: 575px) {
  #main{
    /* display: block; */
    /* 2.2 */
    flex-direction: column;
  }
}

但是导航条和侧边栏比前面例子中的高：

#main > nav, #main >aside{
  background-color: beige;
  flex: 0 0 20vw;
}

将flex: 0 0 20vw设置flex-basis为20vw，这是视图宽度的20％。

如果我们只希望高度是根据内容改变的：

#main > nav, #main >aside{
  background-color: beige;
  /* 2.3 */
  /* flex: 0 0 20vw; */
}

移动优先

移动首先是针对主要为移动设备创建的布局，使用媒体查询，用于更改大型设备上的布局。这与我们上面所做的相反，我们默认的布局是针对大型设备的，我们需要为较小的设备添加了媒体查询：

#main{
  display: flex;
  flex: 1;
  /* 3.2 */
  flex-direction: column;
}


/* 3.1 */
@media screen and (min-width: 576px) {
  #main{
    flex-direction: row;
  }
  #main > nav, #main > aside{
    flex: 0 0 20vw;
  }
}

结果：

媒体查询使用min-width来匹配该宽度和更宽的所有设备。max-width只匹配此宽度或者比此宽度小的设备。

code enjoy! ʕ•ᴥ•ʔ

作者：indeex

链接：http://indeex.cc

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。