pc端响应式布局教程,pc端和手机端响应式布局

首页 > 经验 > 作者:YD1662022-10-25 08:55:57

Bootstrap的响应式断点:

极小设备portrait phones(576px,默认)、小型设备landscape phones(≥576px)、中型设备tablets(≥768px)、大型设备desktops(≥992px)、超大设备large desktops(≥200px)。

pc端响应式布局教程,pc端和手机端响应式布局(9)

Ant design 的屏幕断点:

屏幕断点划分为320、576、768、992、1200。

2.3 断点的应用示例

以下这段代码,通过媒体查询的方式,指定了不同分辨率下字体大小的变化。这段代码对应的布局方案中,屏幕断点是1024,1100,1280,1366,1440,1680,1920。

pc端响应式布局教程,pc端和手机端响应式布局(10)

通过以上可以看出,屏幕断点并不是固定的。在产品设计中,可参考成熟设计规范中的断点,也可根据实际需要定义自己的屏幕断点。一般可通过用户调研和市场调研,确定目标用户所使用的主要设备,以此来定义屏幕断点。

三、自适应设计的实现方法

从实现技术角度,弹性布局、自适应布局、流式布局、响应式布局、网格布局,为多端适配提供了可能性。这部分前端开发的知识,感兴趣的同行可自行了解。从技术实现的核心,可以总结出以下6种设计手法。

3.1 调整大小

pc端响应式布局教程,pc端和手机端响应式布局(11)

3.2 重新定位

pc端响应式布局教程,pc端和手机端响应式布局(12)

上一页12345下一页

栏目热文

文档排行

本站推荐

Copyright © 2018 - 2021 www.yd166.com., All Rights Reserved.