响应式布局

关注

最新推荐文章于 2026-04-06 21:35:08 发布 · 1.2k 阅读

原创 ·

本内容遵循 CC 4.0 BY-SA 版权协议

Figma响应式布局 Figma是一个非常流行的设计工具，它提供了响应式布局的功能，可以让设计师更好地在不同设备上预览设计、调整布局和优化交互。在进行响应式布局设计时，需要首先设计一个大纲，确定页面的整体结构和每个元素的位置，从而保证在不同设备上的一致性。同时，设置网格可以更方便地在不同视窗上进行调整。阅读详情

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

1.1响应式原理

就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。

设备划分

超小屏幕（手机）尺寸：<768px
小屏设备（平板）尺寸：>=768px~<992px
中等屏幕（桌面显示器）尺寸：>=992px~<1200px
宽屏设备（大桌面显示器）尺寸： >=1200px

1.2 响应式布局容器

响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果。

原理就是在不同的屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。

平时我们的响应尺寸划分：

超小屏幕（手机，<768px）设置宽度为：100%
小屏设备（平板>=768px~<992px）设置宽度为：750px
中等屏幕（桌面显示器>=992px~<1200px）设置宽度为：970px
宽屏设备（大桌面显示器>=1200px）尺寸设置宽度为：1170px

1.3案例

需求分析：

1. 当我屏幕大于等于768像素，我们给布局容器container宽度为750px。

2. container里面包含8个小li盒子，每个盒子的宽度定为93.75px（750/8），高度为30px，浮动一行显示。

3. 当屏幕缩放，宽度小于768像素的时候，container盒子宽度修改为100%宽度。

4. 此时里面的8个li，宽度修改为33.33%，这样一行就只能显示3个li，剩余下行显示。

扩展内容

CSS中Media Query（媒介查询/媒体查询）

通过不同的媒介类型和条件定义样式表规则。媒介查询让CSS可以更精确作用于不同的媒介类型和同一媒介的不同条件。媒介查询的大部分媒介特性都接受min和max用于表达”大于或等于”和”小于或等于”。如：width会有min-width和max-width媒介查询可以被用在CSS中的@media和@import规则上，也可以被用在HTML和XML中。通过这个标签属性，我们可以很方便的在不同的设备下实现丰富的界面，特别是移动设备，将会运用更加的广泛。

Media Query能够获取哪些值？

设备的宽和高device-width，device-height显示屏幕/触觉设备。
渲染窗口的宽和高width，height显示屏幕/触觉设备。
设备的手持方向，横向还是竖向orientation（portrait|lanscape）和打印机等。
画面比例aspect-ratio点阵打印机等。
设备比例device-aspect-ratio-点阵打印机等。
对象颜色或颜色列表color，color-index显示屏幕。
设备的分辨率resolution。

语法结构和用法

@media 设备名 only （选取条件） not （选取条件） and（设备选取条件），设备二{sRules}

示例一：在link和 style中使用media：

示例二：在样式表中内嵌@media：

@media ( min-device-width:1024px ) and ( max-width:989px )，screen and ( max-device-width:480px )，( max-device-width:480px ) and ( orientation:landscape )，( min-device-width:480px ) and ( max-device-width:1024px ) and ( orientation:portrait ) {srules}

在示例二中，设置了电脑显示器分辨率（宽度）大于或等于1024px（并且最大可见宽度为989px）；屏宽在480px及其以下手持设备；屏宽在480px以及横向（即480尺寸平行于地面）放置的手持设备；屏宽大于或等于480px小于1024px以及垂直放置设备的css样式。

从上面的例子可以看出，字符间以空格相连，选取条件包含在小括号内，srules为兼容设置的样式表，包含在中括号里面。only（限定某种设备，可省略），and（逻辑与），not（排除某种设备）为逻辑关键字，多种设备用逗号分隔，这一点继承了css基本语法。

类型	解释
all	所有设备
braille	盲文
embossed	盲文打印机
handheld	手持设备
print	文档打印或打印预览模式
projection	项目演示，比如幻灯片
screen	彩色电脑屏幕
speech	演讲
tty	固定字母间距的网络媒体，比如电传打印机
tv	电视

逻辑关键字

关键字	说明
only	限定某种设备类型
and	逻辑与，连接设备与选择条件、1与2
not	排除某种设备
,	设备列表

可用设备名参数

媒体特性	值	可用媒体类型	接受 min/max	简介
width	<length>	视觉屏幕/触摸设备	Yes	定义页面可见区域宽度/px
heigth	<length>	视觉屏幕/触摸设备	Yes	定义页面可见区域高度/px
device-width	<length>	视觉屏幕/触摸设备	Yes	定义屏幕可见区域宽度/px
device-heigth	<length>	视觉屏幕/触摸设备	Yes	定义屏幕可见区域高度/px
orientation	portrait \| landscape	位图介质类型	No	定义height是否大于或等于width
aspect-ratio	<ratio>	位图介质类型	Yes	定义width和height的比率
color	<integer>	视觉媒体	Yes	定义输出设备的彩色原件个数
color-index	<integer>	视觉媒体	Yes	定义彩色查询表的条目数
resolution	<resolution>	位图介质类型	Yes	定义设备分辨率：96dpi、300dpi