持续创作，加速生长！这是我参加「日新计划 10 月更文挑战」的第5天，点击检查活动详情

写在前面

咱们在开发的时分，常常会听到关于各种布局的概念，并且里边有些概念常常会混杂，这篇文章首要便是介绍一下静态布局、流式布局、自适应布局、呼应式布局和弹性布局的特色和运用场景

布局的历史开展

跟着互联网和相关设备的开展，前端的布局大约经历了这几个阶段：table布局阶段、div+css布局阶段、静态布局阶段、流式布局阶段、自适应布局阶段、呼应式布局阶段、弹性布局阶段。前面两种布局现已基本上看不到了，并且现在的布局也越来越往弹性布局靠近。下面的内容首要是要点介绍一下后边几种布局。

静态布局

1. 静态布局的特色
  • 网页中一切元素的单位都是px.不论浏览器尺度是多少，网页布局一直依照最初写代码的布局来显现，也便是说一切的屏幕看到的页面都是相同的。
  • 一般的网站（pc端）都是依照这种方法来布局的
  • 屏幕太小的话，页面会呈现滚动条
  • 屏幕太大的话，页面会有很多的空白，全体页面布局不紧凑
2. 静态布局的原理

给首要容器设置一个min-width,居中布局。假如屏幕巨细小于这个min-width，那么就会添加横向滚动条。假如屏幕巨细大于这个宽度，那么就会居中显现，周围留白的显现的底层的背景。

.container {
  min-width: 1190px；
  margin: 0 auto;
  .content {
    width: 1190px;
  }
}
3. 静态布局的运用场景

一般用于官网（pc端）或许其他pc端网站。假如要在移动端显现，一般用的是另外的一套布局。 以京东官网为例：

3.1 屏幕比页面宽度大

自适应布局和呼应式布局
3.2 屏幕比页面宽度小

自适应布局和呼应式布局

3.3 特殊阐明

京东官网并不是悉数用的静态布局，里边还用到了媒体查询，可是这儿的效果是和静态布局类似。

流式布局

1. 流式布局的特色

流式布局也称为液态布局，从称号咱们就能够看出来，它的宽度是跟着视口的改变而改变的。流式布局具有以下特色：

  • 屏幕巨细改变，页面元素的巨细也会跟着改变，可是布局不变
  • 屏幕太小的时分，页面内容挤成一坨，内容都重叠了，导致页面布局一团乱。
  • 屏幕太大的时分，页面会拉伸的很长，导致内容在一行显现很长，阅览习气不好。
2. 流式布局的原理

页面最外层的容器的尺度运用百分比搭配min-width和max-width来设置，高度一般仍是运用px来设置。

.container {
  width: 100%;
  min-width: 1200px;
  .content {
    width: 50%;
    height: 400px;
  }
}
3. 流式布局的运用场景

流式布局在前期的pc端布局中仍是用的比较多的，可是在现在，不引荐这样运用，由于页面的宽度是跟着屏幕的巨细来改变的，可是高度仍是固定的，就会导致在大屏幕上宽度被拉的很长，可是高度不变，布局看起来不太正常。 就像下面这种状况：

3.1 屏幕太大

自适应布局和呼应式布局

3.2 屏幕太小

自适应布局和呼应式布局

自适应布局

1. 自适应布局的特色
  • 分别为不同的分辨率的屏幕定义布局。每一个静态布局对应一个分辨率规模。
  • 在每个静态布局中，页面元素的尺度不随屏幕巨细的改变而改变。除非屏幕尺度改变让页面从这个静态布局变成了另外一个静态布局。
  • 自适应布局虽然有好几套款式布局，可是关于用户来说网页是相同的，只是页面的元素的巨细产生了改变。
2. 自适应布局的原理

针对不同分辨率选用@media媒体查询给不同规模的屏幕分别写一套款式布局，每一套款式布局选用的仍是静态布局的方法。

2.1 添加元标签

// 添加元标签
<meta name="viewport" content="width=device-width, initial-scale=1" />

2.2 尽量少运用肯定宽度

2.3 字体运用相对巨细

2.4 媒体查询

@media screen and (min-width: 768px) {
  .block{
    width: 680px;
    background-color: yellow;
  }
}
@media screen and (min-width: 1024px) {
  .block{
    width: 768px;
    background-color: blue;
  }
}
@media screen and (min-width: 1580px) {
  .block{
    width: 1190px;
    background-color: red;
  }
}
3. 自适应布局的运用场景

自适应布局在pc端和移动端其实都会用到，也是目前网页开发中常常用到的布局方法之一。一般要么是针对pc端做自适应布局，要么针对移动端做自适应布局。假如要想一起兼容移动端和pc端，那么最好仍是运用呼应式布局啦。

自适应布局和呼应式布局

呼应式布局

呼应式布局也会用到媒体查询，前面咱们提到自适应布局是在不同的屏幕下看到的页面布局是相同，假如屏幕太小的话，即使对小屏幕进行适配，会发现页面仍是过于拥堵，而呼应式正式为了处理这个问题，它能够识别屏幕巨细，仍是依据屏幕巨细调整页面的布局。

1. 呼应式布局的特色
  • 屏幕巨细改变，元素的巨细和位置也会产生改变。
  • 能一起适应pc和移动端，在不同屏幕巨细都有一个杰出的布局。
2. 呼应式布局的原理

呼应式布局的三个原则：移动优先，@media媒体查询，流式布局（也称为液体布局）。其间首要的便是移动优先，移动优先指的是优先设置移动端（也便是小屏的布局），然后针对不同屏幕运用渐进增强。

2.1 添加元标签

<meta name="applicable-device" content="pc,mobile">
<meta http-equiv="Cache-Control" content="no-transform ">
<meta name="viewport" content="width=device-width, initial-scale=1">

2.2 移动优先

首先写好小屏幕的款式，也便是移动端的款式，引荐运用vw或许rem的方法来完成。具体参考我的另外一篇文章

移动端布局适配方案

2.3 媒体查询

写好小屏幕款式之后，需求测试一下小屏幕的各种适配状况，然后再运用媒体查询去依据不同的屏幕规模加载对应的款式，这儿需求特别阐明的是，需求跟规划统一好不同屏幕下的布局，毕竟在规划这块他们仍是专业的。

@media screen and (min-width: 768px) {
  .block{
    width: 680px;
    background-color: yellow;
  }
}
@media screen and (min-width: 1024px) {
  .block{
    width: 768px;
    background-color: blue;
  }
}
@media screen and (min-width: 1580px) {
  .block{
    width: 1190px;
    background-color: red;
  }
}

2.4 流式布局

尽量少给主容器元素设置具体的宽度，这儿我引荐运用的是vw或许百分比的流式布局，然后其他的尺度尽量运用相对单位。

3. 呼应式布局的运用场景

呼应式布局的运用场景便是需求一起兼容pc端和移动端的款式的布局一般都选用这种呼应式布局，还有一些公司是pc端有一套款式，移动端也有一套款式，比如京东便是这样。像这种的话首要仍是看公司事务需求。

自适应布局和呼应式布局

弹性布局

1. 弹性布局的特色

弹性布局指的是页面能够依据屏幕的巨细进行缩放，完成这种布局的方法有两种类型：

  • rem/vw: 完成页面的元素巨细跟着视口的改变而改变
  • flex: 完成页面的元素的主动增加和紧缩
2. 弹性布局的原理

关于弹性布局的这块我就不详细介绍了，感兴趣的能够参考我的另外两篇文章：

移动端布局适配方案

flex布局详解

3. 弹性布局的运用场景
  • rem/vh： 首要运用到适配多种设备
  • flex: 首要运用到主容器的布局方法，比如三栏式布局、垂直居中布局、两列布局、等高布局等。