技术频道


CSS 媒体查询(Media Queries)

CSS Media Queries - 媒体查询


媒体查询是做此事所需的最强大的工具。让我们使用百分比宽度来布局,然后在浏览器变窄到无法容纳侧边栏中的菜单时,把布局显示成一列:

@media screen and (min-width:600px) {
  nav {
    float: left;
    width: 25%;
  }
  section {
    margin-left: 25%;
  }
}
@media screen and (max-width:599px) {
  nav li {
    display: inline;
  }
}
<div id="container">
<section> - 1

当你调整浏览器窗口大小时(缩放到最小),布局比以前更酷了!

</section>
<section> - 2

Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

</section>
 

CSS 媒体查询额外注意


使用 meta viewport 之后可以让你的布局在移动浏览器上显示的更好。

 

CSS 媒体查询扩展阅读:




发表评论