Foundation 网格 - 小型设备

简介: 在Foundation框架中,针对屏幕宽度小于40.0625em的小型设备,使用.small-*类创建了一个简单的两列网格布局,列宽比为25%和75%。此布局遵循移动优先原则,在大屏设备上同样适用,确保总列数为12。例如,可使用.small-3和.small-9实现该布局。

Foundation 网格 - 小型设备
假设我们在小型设备上有一个简单的网格布局,两列,宽度比例为 25% 和 75%。

提示: 小型设备的定义是屏幕小于 40.0625em。

小型设备上我们使用 .small-* 类。

....

....

以下实例设置了两个列,比例为 25% 和 75% (Foundation 是移动优先: 如果没有特别说明,在大型设备上会继承 .small 类的代码): .small in them and use those".

实例


Baidu




Baidu



尝试一下 »
Note 注意: 要保证数列加起来是 12 列!
如果需要设置 33.3%/66.6% 的比例,你可以使用 .small-4 和 .small-8:

实例



Baidu




Baidu



相关文章
Foundation 网格 - 大型设备
在大型设备上,推荐使用33%/66%的网格布局比例(.large-4 和 .large-8)。大型设备屏幕尺寸大于64.0625em。注意,布局总列数应保持为12列。例如,在大型设备上使用 .large-6 类可实现50%/50%的布局,而在中型或小型设备上则会变为100%宽度的堆叠布局。
Foundation 网格 - 中型设备
在Foundation网格系统中,针对中型设备(屏幕尺寸40.0625em至64.0624em),推荐使用50%/50%的布局比例,并通过`.medium-*`类实现。此布局在小型设备上默认为25%/75%,而在中型设备上调整为50%/50%,确保布局适应不同屏幕尺寸。示例中展示了如何在中型设备上应用这一布局。
Foundation 网格实例5
列布局中,`.small-centered` 类可使列在小屏幕上居中,大屏幕需额外添加 `.large-centered`。列偏移通过 `.large-offset-*`(或 `.small-offset-*`)实现,* 表示向右移动的列数。示例展示了不同宽度和偏移量的列布局效果。
Foundation 网格实例6
在Foundation框架中,若一行中列数总和不足12,系统会自动将最后一列右移以填满剩余空间。使用.end类可使最后一列左对齐。示例代码展示了两行三列布局,第二行最后一列应用了.end类。
Foundation 网格实例4
Foundation网格系统支持手机、平板和桌面设备,通过.small-、.medium-、.large-类动态调整布局。例如,.small-6 .large-8表示在小屏幕上占6列,在大屏幕上占8列,实现响应式设计。
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%宽度。
|
9天前
|
前端开发 容器
Foundation 网格系统2
Foundation 网格系统适用于不同设备,包括手机、平板和桌面设备,支持12列布局,具备内嵌、偏移及列排序功能。在宽屏设备上,网格最大宽度为62.5rem,可通过CSS调整max-width或使用背景色跨越全页。
Foundation 网格实例3
通过使用 .small|medium|large-push-* 和 .small|medium|large-pull-* 类可以灵活调整列的顺序,示例如下:.small-4 .small-8-push .small-8 .small-4-pull。此外,还可以在列中嵌套其他列,创建复杂的布局,如:.small-8 中嵌套 .small-8 和 .small-4。
|
7月前
|
前端开发 编译器 测试技术
LabVIEW FPGA利用响应式数字电子板快速开发空间应用程序
LabVIEW FPGA利用响应式数字电子板快速开发空间应用程序
55 1
|
7月前
|
存储 量子技术
用DPU应用程序实现QRAM
用DPU应用程序实现QRAM
112 1