编辑排版 | 宋大狮

平台运营 | 小唐狮

ONE 问题描述

2023年2月26号记，久违了大家。

今天要和大家分享的是关于如何实现响应式布局的问题。

在接触前端这么长时间以来，不论是每次面试时被问到，或者是在公司中与同事交流时，对于响应式布局这个概念，总是一知半解，说不清道不明的，不知道大家有没有同样的感受。

到底什么是响应式布局，它是如何被定义的，为什么我们在项目中需要做响应式布局，以及我们如何去清晰地去实现它，等等等等。

今天，我们就用这篇文章，来好好地理理上述这一个个问题。

浏览过网上很多优秀的文章，对此问题描述很详细，但是个人看了之后仍是不太清楚，长篇大论的还看的头疼。所以，本次尽量会用最少的文字，阐明本问题。

TWO 问题解决

一、是什么

1、静态布局

即传统布局方式。

元素的大小、位置都不会随着屏幕尺寸变化。

2、流式布局

元素的大小会随着屏幕尺寸变化，位置不会。

3、弹性布局

对流式布局的简化升级。

以坐标轴方式快速布局。

4、栅格布局

对流式布局的简化升级。

以行列网格方式快速布局。

5、响应式布局

元素的大小、位置都会随着屏幕尺寸变化。

6、自适应布局

页面会随着屏幕尺寸变化而切换。

二、为什么用

1、静态布局

不做屏幕尺寸变化的考虑。

2、流式布局

只做屏幕尺寸变化对布局的考虑。

3、弹性布局

只做屏幕尺寸变化对布局的考虑。

快速实现流式布局。

4、栅格布局

只做屏幕尺寸变化对布局的考虑。

快速实现流式布局。

5、响应式布局

做屏幕尺寸变化对布局、字体等细节的考虑。

6、自适应布局

做屏幕尺寸变化对布局、字体等细节的考虑。

比响应式布局要求更高，但代价更大。

三：怎样实现

1、静态布局

宽度和字体都用px单位。

2、流式布局

web端：宽度用百分比或vh 单位。

移动端：uni宽度用rpx单位，安卓宽度用dp单位。

3、弹性布局

Flex布局【用权重值控制布局，类似但优于百分比】。

4、栅格布局

Grid布局【用样式属性控制行列网格】。

BootStrap【用类名控制行列网格】。

Element的Layout布局【用组件控制行列网格】。

5、响应式布局

流式布局 + 字体等细节用rem单位 + 媒体查询或js判断屏幕尺寸【用于设置rem取值和元素显示隐藏】

<style>
 .box {
 width: 100%;
 background-color: pink;
 margin-left: 2rem;
 font-size: 1.6rem;
 }
 @media screen and (min-width: 1200px) {
 html {
 font-size: 20px;
 }
 }
 @media screen and (max-width: 1200px) {
 html {
 font-size: 10px;
 }
 }
</style>

6、自适应布局

多页面设计 + 媒体查询或js判断屏幕尺寸【用于切换页面】

- END -