Foundation 网格 - 大型设备

简介: 在大型设备上,推荐使用33%/66%的网格布局比例(.large-4 和 .large-8)。大型设备屏幕尺寸大于64.0625em。注意,布局总列数应保持为12列。例如,在大型设备上使用 .large-6 类可实现50%/50%的布局,而在中型或小型设备上则会变为100%宽度的堆叠布局。

Foundation 网格 - 大型设备
上一章节我们介绍了中型设备和小型设备的网格布局,小型设备上使用的比例为 25%/75% (.small-3 和 .small-9),但在中型设备上使用的比例为 50%/50% (.medium-6 和 .medium-6):

....

....

在大型设备上我们推荐的比例为 33%/66%。

提示: 大型设备的屏幕尺寸定义大于 64.0625em。

大型设备上使用 .large-* 类。

现在我们在大型设备上添加两列:

....

....

解析
小型设备两个列的比例为 25%/75% (.small-3 和 .small-9)
中型设备两个列的比例为 50%/50% (.medium-6 和 .medium-6)
大型设备两个列的比例为 33%/66% (.large-4 和 .large-8)
实例


Baidu




Baidu



尝试一下 »
Note 注意: 要保证数列加起来是 12 列!
仅在大型设备上使用
以下实例中我们指定了 .large-6 类 (不是 .medium- 和 .small-)。这表明在大型设备上比例为 50%/50%。但在中型或小型设备上会水平堆叠 (100% 宽度):

实例



Baidu




Baidu



相关文章
|
12月前
|
存储 算法 安全
硬盘数据恢复——硬盘固件区损坏的数据恢复方案
硬盘故障: 硬盘固件区损坏。 硬盘固件区损坏的故障表现: 1、硬盘寻道正常但无法正确识别自身型号或容量。 2、硬盘可以正常识别自身型号和容量但无法读取。
|
Java Maven
IntelliJ IDEA的maven如何提高下载速度
IntelliJ IDEA的maven如何提高下载速度
1136 0
|
人工智能 智能设计 算法
AI在工业生产
AI正日益深化工业生产应用,提升智能化与自动化水平。从自动化生产线的精准操作,到制造流程优化、仓库管理革新、节能与可持续性改进,以及数据分析驱动的决策支持,AI全方位助力生产效率和质量提升。智能设计也成为AI在工业设计中的关键,促进产品创新。随着技术发展,AI在工业生产中的作用将更加显著,驱动行业持续创新与优化。
327 1
|
移动开发 JSON 小程序
动态路由 TheRouter 的设计与实践
这篇文章是我在 2022【[GIAC 全球互联网架构大会](https://giac.msup.com.cn/2022sh/course?id=16425)】分享时所讲内容的文字版本,修改删减了演讲时的冗余言语,现开放给大家阅读,希望能给买不到票参加分享的 开源实验室 读者带来帮助。
359 0
|
存储 前端开发 UED
轻松学会css变量
轻松学会css变量
148 0
|
JavaScript
ts重点学习145-搭建vue3_ts文件
ts重点学习145-搭建vue3_ts文件
186 0
ts重点学习145-搭建vue3_ts文件
|
前端开发 容器
重学前端 36 # Flex 布局
重学前端 36 # Flex 布局
234 0
|
存储 开发框架 安全
ASP.NET Core 基于声明的访问控制到底是什么鬼?
从ASP.NET 4.x到ASP.NET Core,内置身份验证已从基于角色的访问控制(RBAC)转变为基于声明的访问控制(CBAC)。
ASP.NET Core 基于声明的访问控制到底是什么鬼?
|
1天前
|
云安全 监控 安全