CSS之布局系列--静态布局、流式布局、自适应布局、响应式布局的概念及区别

短命女 2023-10-01 10:35 10阅读 0赞

原文网址：[CSS之布局系列--静态布局、流式布局、自适应布局、响应式布局的概念及区别静态布局、流式布局、自适应布局、响应式布局的概念及区别\_IT利刃出鞘的博客-CSDN博客][CSS_--_IT_-CSDN]

## 简介 ##

**说明**

本文介绍前端的布局的常用方案的概念、优缺点、适用场景等。

**布局概述**

前端一共有这些布局方案：静态布局、流式布局、自适应布局、响应式布局。其特点如下：

**静态布局**：只写一个布局，尺寸用绝对单位（px）。如果屏幕小于这个布局宽度就会出现滚动条，如果屏幕大于这个布局宽度则内容居中外加背景。

**流式布局**：页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。如果屏幕太大或者太小都会导致元素无法正常显示。

**自适应布局**：分别为不同的屏幕分辨率定义一套布局，每个静态布局对应一个屏幕分辨率范围。比如：PC端、平板端、手机端分别开发一套页面，通过检测设备分辨率来返回不同的页面。

**响应式布局**：同一页面在不同屏幕尺寸下有不同的布局。

## 静态布局 ##

**布局特点**

网页上的所有元素的尺寸一律使用px作为单位，不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。

这是传统的布局方案，常见于PC端。当前，大部分门户网站、分企业的PC宣传站点都采用了这种布局方式。固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单办法。但这种方法不能适应未知设备的方法。

**设计方法**

PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，如果屏幕小于这个宽度就会出现滚动条，如果屏幕大于这个宽度则内容居中外加背景。

移动端：另外建立移动网站，单独设计一个布局，使用不同的域名如wap.或m.。在移动端开发中采用静态布局的两种方式：

*  方案1：在viewport meta标签上设置width=320，页面的各个元素也采用px作为单位。通过用JS动态修改标签的initial-scale使得页面等比缩放，从而刚好占满整个屏幕。（见前端开发-web app 变革之rem）
 *  方案2：设在viewport meta标签上设置content"width=640,user-scalable=no，页面的各个元素也采用px作为单位。由于640px超出了手机宽度，浏览器会自动缩小页面至刚好全屏。

**优点**

简单，没有兼容性问题。

**缺点**

不能根据用户的屏幕尺寸做出不同的表现。

## **流式布局** ##

**布局特点**

流式布局，英文是：Liquid（也叫"Fluid") 。

特点：页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。这就导致如果屏幕太大或者太小都会导致元素无法正常显示。

代表作栅栏系统（网格系统）。

**设计方法**

使用%百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。

往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。

**优点**

元素的宽高用百分比做单位，这样一来元素宽高会随分辨率调整，布局变化不大。

**缺点**

屏幕尺度跨度过大的情况下，px部分不变化，百分比部分变化大，会显得页面展示非常不协调。

## **自适应布局** ##

**布局特点**

分别为不同的屏幕分辨率定义一套布局，每个静态布局对应一个屏幕分辨率范围。比如：PC端、平板端、手机端分别开发一套页面，通过检测设备分辨率来返回不同的页面。

在每个静态布局中，页面元素不随窗口大小的调整发生变化。

**设计方法**

使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。

**优点**

可以在已知的范围内实现对应屏幕的自适应。

**缺点**

对于未知的宽度不能自适应。

## **弹性布局** ##

### **em/rem方案** ###

**布局特点**

在不同屏幕分辨率下页面所有元素的高宽都等比例缩放。

**设计方法**

使用 em 或 rem 单位进行相对布局。

**优点**

所有屏幕的高宽比和最初的设计高宽比一样，或者相差不多，完美适应

**缺点**

只是宽度自适应，高度却没有做到自适应

### **flex方案** ###

**布局特点**

常用于三栏式布局、垂直居中布局、水平居中布局。

**设计方法**

将父元素设置为：display: flex，然后进行更多设置。

**优点**

简便、完整、响应式地实现各种页面布局

**缺点**

只兼容IE10+的浏览器。

## **响应式布局** ##

**简介**

CSS3出现了媒体查询技术，出现了响应式设计的概念。

**布局特点**

只需要一套代码就可以了，它可以适用于所有设备（PC、手机、平板等）。

同一页面在不同屏幕尺寸下有不同的布局。

**设计方法**

只开发一套页面，代码在客户端读到屏幕的尺寸之后展现对应尺寸的布局和内容。

响应式布局通常将多种布局结合使用：媒体查询 + 弹性布局 + 流式布局 + ...

**优点**

适应所有设备，如果足够耐心，效果可以达到完美。

**缺点**

1.  媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。
2.  要匹配足够多的屏幕大小，工作量不小，UI设计也需要多个版本。

[CSS_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122119409

发表评论取消回复

表情：

评论列表（有 0 条评论，10人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS之布局系列--静态布局、流式布局、自适应布局、响应式布局的概念及区别

原文网址：[CSS之布局系列--静态布局、流式布局、自适应布局、响应式布局的概念及区别静态布局、流式布局、自适应布局、响应式布局的概念及区别\_IT利刃出鞘的博客-CSDN博客

短命女/ 2023年10月01日 10:35/ 0 赞/ 11 阅读

相关静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别

原文：[静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别][Link 1] 静态布局（Static Layout）即传统Web设计，网页上的所有元素

柔情只为你懂/ 2023年07月03日 10:43/ 0 赞/ 27 阅读

相关自适应布局和响应式布局

我根据个人理解描述一下：一套程序在多种终端设备展示，页面布局有2种：自适应布局和响应式布局。这二者有啥区别呢？自适应布局，就是页面在多种终端设备，不同分辨率下，能够正常

柔情只为你懂/ 2022年12月27日 07:43/ 0 赞/ 264 阅读

相关响应式布局与自适应布局

自适应布局为不同的设备提供不同的网页，比如专门写一个mobile / iPhone / iPad版本。虽然解决了适配，但是比较麻烦，同时要维护好几个版本，而且如果一个网

女爷i/ 2022年11月26日 15:54/ 0 赞/ 294 阅读

相关 this指向，响应式布局和自适应布局...

Riew 一、 this 指向问题普通函数中的 this指向window 构造函数中的this被调用时，指向构造出来的对象实例匿名函数中的th

Love The Way You Lie/ 2022年07月13日 14:19/ 0 赞/ 250 阅读

相关布局的几种方式（静态布局、自适应布局、流式布局、响应式布局、弹性布局）

一、静态布局（static layout）即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点　　不管浏览器尺寸具体是多少，网页布局始

我不是女神ヾ/ 2022年05月24日 06:57/ 0 赞/ 383 阅读

相关理解流式布局和响应式布局

流式布局：流式布局在CSS2时代就有，主要是靠百分比进行排版，可以在不同分辨率下显示相同的版式。流式布局：网页中主要的划分区域的尺寸使用百分数（搭配min-\、ma

古城微笑少年丶/ 2022年05月21日 22:29/ 0 赞/ 310 阅读

相关 2019前端布局方案：静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别

一、静态布局（Static Layout）即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按

矫情吗；*/ 2022年05月21日 01:44/ 0 赞/ 313 阅读

相关响应式布局和自适应布局详解

[响应式布局和自适应布局详解][Link 1] 2018-11-01[HTML][] | [响应式][Link 2]124630View8 [响应式][Link 1]布

柔光的暖阳◎/ 2022年01月29日 00:53/ 0 赞/ 367 阅读

相关布局的几种方式（静态布局、自适应布局、流式布局、响应式布局、弹性布局）...

一、静态布局（static layout）　　即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点　　不管浏览器尺寸具体是多少，网页布局始终...

红太狼/ 2021年04月27日 15:35/ 0 赞/ 762 阅读