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



相关文章
Foundation 网格 - 中型设备
在Foundation网格系统中,针对中型设备(屏幕尺寸40.0625em至64.0624em),推荐使用50%/50%的布局比例,并通过`.medium-*`类实现。此布局在小型设备上默认为25%/75%,而在中型设备上调整为50%/50%,确保布局适应不同屏幕尺寸。示例中展示了如何在中型设备上应用这一布局。
Foundation 网格 - 小型设备
在Foundation框架中,针对屏幕宽度小于40.0625em的小型设备,使用.small-*类创建了一个简单的两列网格布局,列宽比为25%和75%。此布局遵循移动优先原则,在大屏设备上同样适用,确保总列数为12。例如,可使用.small-3和.small-9实现该布局。
Foundation 网格 - 水平堆叠
本示例展示了一个基础网格系统,适用于不同设备。在PC和平板上,元素水平排列;在手机等小屏设备上,元素则水平堆叠显示。通过使用.small-*, .medium-*, .large-*类指定各列宽度,确保总和为12列以实现响应式布局。
|
9天前
|
前端开发 容器
Foundation 网格系统2
Foundation 网格系统适用于不同设备,包括手机、平板和桌面设备,支持12列布局,具备内嵌、偏移及列排序功能。在宽屏设备上,网格最大宽度为62.5rem,可通过CSS调整max-width或使用背景色跨越全页。
Foundation 网格系统1
Foundation 网格系统基于12列布局,支持响应式设计,能自动适应不同屏幕尺寸。通过 .small、.medium 和 .large 类别,可针对手机、平板和电脑等设备创建灵活的布局。每行内的列数总和需为12,如 <div class="small-12 columns"> 表示100%宽度,<div class="small-8 columns"> 和 <div class="small-4 columns"> 分别表示66.6%和33.3%宽度。
|
7月前
|
机器学习/深度学习 人工智能 算法
打造未来:构建下一代智能操作系统的蓝图
【5月更文挑战第15天】 随着人工智能和机器学习技术的不断进步,下一代智能操作系统的构想正在从科幻走向现实。本文深入探讨了构建一个能够自我学习、适应并优化用户体验的操作系统所需的关键技术组件。我们将分析现有操作系统的局限性,并提出一个创新的框架设计,该设计集成了模块化结构、自适应算法和高级用户交互界面。文章还将讨论实现这一目标所面临的技术挑战以及潜在的解决方案,为未来的操作系统发展提供一个可能的蓝图。
45 1
|
7月前
|
存储 算法 大数据
LabVIEW中管理大型数据
LabVIEW中管理大型数据
56 1
|
7月前
|
存储 量子技术
用DPU应用程序实现QRAM
用DPU应用程序实现QRAM
112 1
|
自然语言处理 Kubernetes 安全
服务网格 ASM 年终总结:最终用户如何使用服务网格?
本文不打算回顾 Istio 或是阿里云服务网格 ASM 的变化或趋势,我们来聊一聊阿里云 ASM 服务网格,它的最终用户是如何使用服务网格的。
服务网格 ASM 年终总结:最终用户如何使用服务网格?
|
Web App开发 前端开发 API
Web 端的下一代三维图形
本文讲的是Web 端的下一代三维图形,今天,苹果 WebKit 团队提议在 W3C 成立一个新的社区群组(Community Group)来讨论 Web 端三维图形的未来和开发一款支持现代 GPU 特性(包括底层图像处理和通用计算)的标准 API。
1164 0