响应式布局

本文最后更新于：8 个月前

响应式布局与几种相似布局介绍，主流的端点方案，响应式开发的两种优先策略、响应式的实现方案，百分比属性的参考标的

响应式布局

一、简介

1. 什么是响应式布局

响应式布局就是：通过检测视口的类型、分辨率，针对不同客户端应用不同的样式，来展现不同的布局和内容。

2. vs 其它布局

除了 「响应式布局」，与之相似的还有另外一种叫 「自适应布局」，网上有说法认为两者相同，也有说法认为两者不同（这里我们假定两者相同）。除了这两个之后，还有一些比较相似的布局

流式布局：是页面中元素的宽度按照屏幕分辨率自动进行适配调整，也就是我们常说的适配，它可以保证当前屏幕分辨率发生改变的时候，页面中的元素大小也可以跟着改变

瀑布流布局：多行不等高排列，根据内容原比例自动调节高度

弹性布局：CSS3 中的一种新的布局模式（Flex Box），可以简便、完整、响应式地实现各种页面布局。

以上定义并非唯一答案，事实上，大家对于不同”布局“的理解有有诸多差异。但想一想，分清楚什么布局是什么布局，这件事并没有多大意义，就好像喝一杯可乐的时候去纠结它是百事可乐还是可口可乐一样，不管它叫什么，都不妨碍它们都是碳酸饮料这个本质。同理，在面对不同的布局需求时，我们只需要知道用哪种方式能够合理地实现就可以了，至于这种方式叫什么，完全不妨碍我们实现需求。

3. 响应式布局的要点

  • 设置viewport
  • 媒体查询
  • 尺寸自适应
  • 图片的适配
  • 结合成型方案

二、断点方案

通过「CSS媒体查询」，我们可以为不同的媒体类型定义不同的样式（通常是为不同设备的屏幕定义不同的样式）。但是该如何区分不同设备的屏幕呢？目前主流的一种区分方式是通过屏幕分辨率（宽度、高度）来进行区分。那么又该如何定义不同设备的屏幕宽度范围呢？这里我们参考市场的成熟方案——断点 · Bootstrap v5 中文文档 v5.3 | Bootstrap 中文网 (bootcss.com)

Breakpoint Class infix Dimensions
Extra small 手机 None <576px
Small 平板 sm ≥576px
Medium 平板 md ≥768px
Large 普通PC屏幕 lg ≥992px
Extra large 高分辨率PC屏幕 xl ≥1200px

Ant-design的端点方案就是参照了 bootstrap 的这个方案

三、优先策略

我们书写样式总要有一个先后顺序，比如先基于PC屏幕写一套基本样式，然后再使用CSS媒体查询为PC端修改布局方式，这种就叫「PC优先」。同理，我们可以先基于移动端（手机or平板）写一套基本样式，然后再使用CSS媒体查询，为PC端做样式修改进行适配，这种就叫「移动端优先」。

这两种优先策略没有本质区别，所区别的只是写法。下面通过例子进行对比

1. PC优先

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* 基本样式 PC端 */
body{
    background-color: red;
}

/* 平板 width <= 992px */
@media screen and (max-width:992px){
    body{
        background-color: green;
    }
}

/* 手机 width <= 576px */
@media screen and (max-width:576px){
    body{
        background-color: blue;
    }
}

当屏幕宽度小于992px时，第二段样式会覆盖第一段样式，背景颜色从red变成green；当屏幕宽度小于576px时，第三段样式会覆盖前两段样式，背景颜色变成blue。

2. 移动端优先

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* 基本样式 手机端 */
body{
    background-color: blue;
}

/* 平板 width >= 576px */
@media screen and (min-width:576px){
    body{
        background-color: green;
    }
}

/* PC端 width >= 992px */
@media screen and (max-width:992px){
    body{
    	background-color: red;
	}
}

四、实现方案

1. CSS媒体查询

这是实现响应式布局最本质的方法，也是最灵活的方案。

详细的使用方法看这篇：CSS（七）媒体查询 - timegogo

这里简要介绍一下3种使用方式：

第一种是直接在CSS文件中使用，也是最常见的方式

1
2
3
4
5
6
7
8
9
10
11
12
@media (max-width: 320px) {
    /*0~320*/
    body {
        background: pink;
    }
}
@media (min-width: 321px) and (max-width: 375px) {
    /*321~768*/
    body {
        background: red;
    }
}

第二种是与@import结合使用

1
2
3
<head>
    @import 'index01.css' screen and (max-width:1024px) and (min-width:720px)
</head>

第三种是结合<link>标签使用

1
2
3
4
<head>
    <link rel="stylesheet" type="text/css" href="index01.css" media="screen and (max-width:1024px) and (min-width:720px)"/>
	<link rel="stylesheet" type="text/css" href="index02.css" media="screen and (max-width:720px)"/>
</head>

2. 成型方案

比如 Ant-design 提供了 栅格系统，结合:xs、:sm、lg等属性就可以用来实现响应式布局

1
2
3
4
5
6
<a-row justify="center">
	<a-col :xs="24" :sm="18" :lg="12">
		<a-input-search v-model:value="searchText" placeholder="输入关键词，如：校卡" :maxlength="20" size="large"
			 enter-button="搜索" @search="handleSearch"></a-input-search>
	</a-col>
</a-row>

五、尺寸自适应

1. 百分比

标题就不叫百分比布局了，要不然又要多一种布局了（晕）

在定义元素的width、height、padding、margin时，我们经常使用百分比的方式，但是这里的百分比究竟是相对于 哪个元素 的 哪个属性 而言的呢？

属性 相对于
height 直接父元素的 height
width 直接父元素的 width
padding 直接父元素的 width
margin 直接父元素的 width
border-radius 相对于自身
translate 相对于自身
background-size 相对于自身
top 和 bottom 非static定位的父元素的 height
left 和 right 非static定位的父元素的 width

2. vw 和 vh

css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度

单位 含义
vw 相对于视窗的宽度，1vw 等于视口宽度的1%，即视窗宽度是100vw
vh 相对于视窗的高度，1vh 等于视口高度的1%，即视窗高度是100vh
vmin vw和vh中的较小值
vmax vw和vh中的较大值
CSS > CSS布局
响应式布局
http://timegogo.top/2023/04/05/CSS/响应式布局/
作者
丘智聪
发布于
2023年4月5日
更新于
2023年7月16日
许可协议