css3 - 一文详解 “自适应布局和响应式布局“ 超详细介绍及原理，以及适用场景！

最新推荐文章于 2024-08-09 16:21:47 发布

街尾杂货店&

最新推荐文章于 2024-08-09 16:21:47 发布

阅读量3.5k

点赞数 3

分类专栏： css3 文章标签： css3 前端 css

本文链接：https://blog.csdn.net/weixin_50545213/article/details/128862497

版权

css3 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了前端布局的发展历程，包括静态布局、流式布局、自适应布局、响应式布局和弹性布局。静态布局固定像素，不随屏幕尺寸变化；流式布局宽度按视口变化，但可能导致内容重叠；自适应布局针对不同分辨率定义布局；响应式布局则通过媒体查询动态调整布局；弹性布局利用rem/vw或flex实现元素大小按屏幕缩放。

摘要由CSDN通过智能技术生成

介绍

随着互联网和相关设备的发展，前端的布局大概经历了这几个阶段：table布局阶段、div+css布局阶段、静态布局阶段、流式布局阶段、自适应布局阶段、响应式布局阶段、弹性布局阶段。

前面两种布局已经基本上看不到了，而且现在的布局也越来越往弹性布局靠近。主要是重点介绍一下后面几种布局。

静态布局

一、静态布局的特点

网页中所有元素的单位都是px（不管浏览器尺寸是多少），网页布局始终按照最初写代码的布局来显示，也就是说所有的屏幕看到的页面都是一样的。
一般的网站（pc端）都是按照这种方式来布局的，目前也有很多。
屏幕太小的话，页面会出现滚动条。屏幕太大的话，页面会有很多的空白，整体页面布局不紧凑。

二、静态布局的原理

给主要容器设置一个 min-width，居中布局。如果屏幕大小小于这个 min-width，那么就会增加横向滚动条。如果屏幕大小大于这个宽度，那么就会居中显示，旁边留白的显示的底层的背景。

.container {
  min-width: 1190px；
  margin: 0 auto;
  .content {
    width: 1190px;
  }
}

三、静态布局的应用场景

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

屏幕比页面宽度大：

在这里插入图片描述

屏幕比页面宽度小：

在这里插入图片描述

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

流式布局

一、流式布局的特点

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

屏幕大小变化，页面元素的大小也会跟着变化，但是布局不变。
屏幕太小的时候，页面内容挤成一坨，内容都重叠了，导致页面布局一团乱。
屏幕太大的时候，页面会拉伸的很长，导致内容在一行显示很长，阅读体验不好。

二、流式布局的原理

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

.container {
  width: 100%;
  min-width: 1200px;
  .content {
    width: 50%;
    height: 400px;
  }
}

三、流式布局的应用场景

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

屏幕太大：

在这里插入图片描述

屏幕太小：

在这里插入图片描述

自适应布局

一、自适应布局的特点

分别为不同的分辨率的屏幕定义布局，每一个静态布局对应一个分辨率范围。
在每个静态布局中，页面元素的尺寸不随屏幕大小的变化而变化。除非屏幕尺寸变化让页面从这个静态布局变成了另外一个静态布局。
自适应布局虽然有好几套样式布局，但是对于用户来说网页是一样的，只是页面的元素的大小发生了变化。

二、自适应布局的原理

针对不同分辨率采用 @media 媒体查询给不同范围的屏幕分别写一套样式布局，每一套样式布局采用的还是静态布局的方式。

添加元标签：<meta name="viewport" content="width=device-width, initial-scale=1" />
尽量少使用绝对宽度，字体使用相对大小。

媒体查询：

@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;
  }
}

三、自适应布局的应用场景

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

响应式布局

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

一、响应式布局的特点

屏幕大小变化，元素的大小和位置也会发生改变。
能同时适应 pc 和移动端，在不同屏幕大小都有一个良好的布局。

二、响应式布局的原理

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

添加元标签：

<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">

移动优先：

首先写好小屏幕的样式，也就是移动端的样式，推荐使用 vw 或者 rem 的方式来实现。

媒体查询：

写好小屏幕样式之后，需要测试一下小屏幕的各种适配情况，然后再使用媒体查询去根据不同的屏幕范围加载对应的样式，这里需要特别说明的是，需要跟设计统一好不同屏幕下的布局，毕竟在设计这块他们还是专业的。

@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;
  }
}