怎样实现响应式网页布局

njr大约 2 分钟约 584 字

设置响应式断点

tailwindopen in new window 典型的断点如下：

@media (min-width: 640px) {
  /* ... */
}
@media (min-width: 768px) {
  /* ... */
}
@media (min-width: 1024px) {
  /* ... */
}
@media (min-width: 1280px) {
  /* ... */
}
@media (min-width: 1536px) {
  /* ... */
}

Bootstrap 断点如下：

@media (min-width: 576px) {
  /* ... */
}
@media (min-width: 768px) {
  /* ... */
}
@media (min-width: 992px) {
  /* ... */
}
@media (min-width: 1200px) {
  /* ... */
}
@media (min-width: 1400px) {
  /* ... */
}

用百分比确定布局元素的大小或创建 CSS 网格布局

布局容器的数量取决于设计，但大多数网站都将重点放在以下元素上：

Wrapper or Container
Header
Content
Sidebar
Footer

根据移动优先原则，你可以像这样设计主要布局元素的样式（针对手机的基本样式不使用媒体查询）：

#wrapper {
  width: 95%;
  margin: 0 auto;
}

#header {
  width: 100%;
}

#content {
  width: 100%;
}

#sidebar {
  width: 100%;
}

#footer {
  width: 100%;
}

/* Small devices (landscape phones, 576px and up) */

@media (min-width: 576px) {
  /* ... */
}

/* Medium devices (tablets, 768px and up) */

@media (min-width: 768px) {
  #wrapper {
    width: 90%;
    margin: 0 auto;
  }

  #content {
    width: 70%;
    float: left;
  }

  #sidebar {
    width: 30%;
    float: right;
  }
}

/* Large devices (desktops, 992px and up) */

@media (min-width: 992px) {
  /* ... */
}

/* Extra large devices (large desktops, 1200px and up) */

@media (min-width: 1200px) {
  #wrapper {
    width: 90%;
    margin: 0 auto;
  }
}