自适应布局和响应式布局

·  阅读 5940

持续创作,加速成长!这是我参与「掘金日新计划 · 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 屏幕比页面宽度大

企业微信截图_198fc75a-1511-4168-85e3-a960586ec522.png 3.2 屏幕比页面宽度小

企业微信截图_272cac48-210c-448b-8853-e121b17b4c2d.png

3.3 特殊说明

京东官网并不是全部用的静态布局,里面还用到了媒体查询,但是这里的效果是和静态布局类似。

流式布局

1. 流式布局的特点

流式布局也称为液态布局,从名称我们就可以看出来,它的宽度是随着视口的变化而变化的。流式布局具有以下特点:

  • 屏幕大小变化,页面元素的大小也会跟着变化,但是布局不变
  • 屏幕太小的时候,页面内容挤成一坨,内容都重叠了,导致页面布局一团乱。
  • 屏幕太大的时候,页面会拉伸的很长,导致内容在一行显示很长,阅读习惯不好。
2. 流式布局的原理

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

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

流式布局在早期的pc端布局中还是用的比较多的,但是在现在,不推荐这样使用,因为页面的宽度是随着屏幕的大小来变化的,但是高度还是固定的,就会导致在大屏幕上宽度被拉的很长,但是高度不变,布局看起来不太正常。 就像下面这种情况:

3.1 屏幕太大

企业微信截图_a42f6c6a-fb46-49d7-b6dd-71d42dfc724d.png

3.2 屏幕太小

企业微信截图_873ebaaa-e701-42cd-ae7c-0f83a9d80e70.png

自适应布局

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端,那么最好还是使用响应式布局啦。

image.png

响应式布局

响应式布局也会用到媒体查询,前面我们提到自适应布局是在不同的屏幕下看到的页面布局是一样,如果屏幕太小的话,即使对小屏幕进行适配,会发现页面还是过于拥挤,而响应式正式为了解决这个问题,它可以识别屏幕大小,还是根据屏幕大小调整页面的布局。

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端有一套样式,移动端也有一套样式,比如京东就是这样。像这种的话主要还是看公司业务需要。

image.png

弹性布局

1. 弹性布局的特点

弹性布局指的是页面能够根据屏幕的大小进行缩放,实现这种布局的方式有两种类型:

  • rem/vw: 实现页面的元素大小随着视口的变化而变化
  • flex: 实现页面的元素的自动增长和压缩
2. 弹性布局的原理

关于弹性布局的这块我就不详细介绍了,感兴趣的可以参考我的另外两篇文章:

移动端布局适配方案

flex布局详解

3. 弹性布局的应用场景
  • rem/vh: 主要应用到适配多种设备
  • flex: 主要应用到主容器的布局方式,比如三栏式布局、垂直居中布局、两列布局、等高布局等。
收藏成功!
已添加到「」, 点击更改