Foundation 网格 - 中型设备

简介: 在Foundation网格系统中,针对中型设备(屏幕尺寸40.0625em至64.0624em),推荐使用50%/50%的布局比例,并通过`.medium-*`类实现。此布局在小型设备上默认为25%/75%,而在中型设备上调整为50%/50%,确保布局适应不同屏幕尺寸。示例中展示了如何在中型设备上应用这一布局。

Foundation 网格 - 中型设备
上一章节我们介绍了小型设备上我们使用 .small-* 类来设置,网格比例为 25%/75%:

....

....

在中型设备上我们推荐的比例为 50%/50%。

提示: 中型设备的屏幕尺寸定义在 40.0625em 到 64.0624em 之间。

中型设备上使用 .medium-* 类。

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

....

....

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

小型设备上使用的比例为 25%/75% (.small-3 和 .small-9)。但在中型设备上使用的比例为 50%/50% (.medium-6 和 .medium-6) 。

实例


Baidu




Baidu



尝试一下 »
Note 注意: 要保证数列加起来是 12 列!

相关文章
|
前端开发 JavaScript
使用Element-UI中的el-upload实现文件的上传demo(亲测有用)
使用Element-UI中的el-upload实现文件的上传demo(亲测有用)
uniapp manifest.json 完整参数配置参考文档
uniapp manifest.json 完整参数配置参考文档
428 0
|
机器学习/深度学习 存储 并行计算
ModelScope问题之训练报错设置参数如何解决
ModelScope训练是指在ModelScope平台上对机器学习模型进行训练的活动;本合集将介绍ModelScope训练流程、模型优化技巧和训练过程中的常见问题解决方法。
220 0
|
算法
【MATLAB】语音信号识别与处理:一维信号NLM非局部均值滤波算法去噪及谱相减算法呈现频谱
【MATLAB】语音信号识别与处理:一维信号NLM非局部均值滤波算法去噪及谱相减算法呈现频谱
356 1
|
Windows
禁止ie自动跳转edge
禁止ie自动跳转edge
480 0
|
3月前
|
安全 数据安全/隐私保护 虚拟化
Windows Server 2022 中文版、英文版下载 (2025 年 9 月更新)
Windows Server 2022 中文版、英文版下载 (2025 年 9 月更新)
321 0
Windows Server 2022 中文版、英文版下载 (2025 年 9 月更新)
|
6月前
|
SQL Java 数据库
解决Java Spring Boot应用中MyBatis-Plus查询问题的策略。
保持技能更新是侦探的重要素质。定期回顾最佳实践和新技术。比如,定期查看MyBatis-Plus的更新和社区的最佳做法,这样才能不断提升查询效率和性能。
259 1
数据结构堆排序中堆的建立、调整、插入、删除等操作的详解(题目讲解 简单易懂)
数据结构堆排序中堆的建立、调整、插入、删除等操作的详解(题目讲解 简单易懂)
1029 0
|
缓存 Java API
API接口性能优化管理
在数字化时代,API性能优化对于提升软件效率和用户体验至关重要。本文介绍了多种优化方法:配置优化包括调整JVM参数等;代码层面减少重复调用并批量操作数据库;池化技术如线程池和HTTP连接池能有效利用资源;数据库优化通过索引提高查询速度;异步处理则使主流程业务不受阻塞;缓存策略如Redis缓存减少数据库访问;可观测性工具如日志平台和APM帮助监控性能。综合运用这些方法,可根据业务需求持续调整优化,显著提升API性能及用户体验。
|
Linux API 调度
关于在Linux内核中使用不同延迟/休眠机制 【ChatGPT】
关于在Linux内核中使用不同延迟/休眠机制 【ChatGPT】