admin管理员组

文章数量:1568308

2024年5月11日发(作者:)

Background

写在前面

近年来,三星、华为等手机厂商陆续发布 Galaxy Fold 、 Mate X 等折叠屏手机。其

普及速度似乎超过了人们的想象。2021 年 12 月 2 日,根据屏幕机构 DSCC 公布的一份

最新研究报告指出: 今年第三季度,折叠屏手机的总出货量环比增加了215 %、同比更

是暴涨 480 %。

折叠屏手机从折叠的方式和角度可以分为:内折叠、外折叠、X轴折叠、Y轴折叠

等,目前这四个方向均已落地在各大产品中。其中最常见的使用状态有折叠状态和展开状

态。折叠屏展开下屏幕变宽,给用户带来了更高效的信息展示和更加沉浸的浏览体验。

从曲面到大屏再到折叠屏,这一概念的想法已经成为现实,屏幕宽窄的变化给体验设

计也带来新的挑战,为了保证不同宽度下的使用品质,我们采用了响应式布局的设计策略

来解决适配问题。本次笔者将从最常见的 X 轴折叠的方式 (以华为手机 Mate X 为例),对

响应式布局技术进行探索。

Part 1

什么是响应式布局

形容响应式布局最贴切的一句话为“ Content is like water ”,即:“如果将屏幕看

作容器,那么内容就像水一样。”

通俗来说,「响应式布局」就是一套代码、一种设计语言同时兼容所有尺寸及终端,

由一个网站转变成多个网站。在以前,响应式布局更多用在 PC Web 上,随着平板、大

屏手机等等移动设备的普及,响应式布局越来越多地运用在移动互联网来解决多端浏览体

验。

本文标签: 折叠布局响应手机