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 完整参数配置参考文档
383 0
|
算法
【MATLAB】语音信号识别与处理:一维信号NLM非局部均值滤波算法去噪及谱相减算法呈现频谱
【MATLAB】语音信号识别与处理:一维信号NLM非局部均值滤波算法去噪及谱相减算法呈现频谱
317 1
|
Windows
禁止ie自动跳转edge
禁止ie自动跳转edge
392 0
|
1月前
|
安全 数据安全/隐私保护 虚拟化
Windows Server 2022 中文版、英文版下载 (2025 年 9 月更新)
Windows Server 2022 中文版、英文版下载 (2025 年 9 月更新)
208 0
Windows Server 2022 中文版、英文版下载 (2025 年 9 月更新)
|
11月前
|
数据采集 人工智能 自然语言处理
关于大模型语料的迷思
随着大模型发展的不断深入,我们越来越关注到语料质量对模型能力的影响,语料中的偏差和主观性会导致生成内容不准确或带有偏见。智能引擎事业部是阿里内部深耕多年的AI工程团队,为内部业务提供了完整的大模型工程体系,持续关注大模型训推性能、成本、研发范式等关键问题。本文将基于我们的思考,探讨大模型语料的复杂性及其背后的思维过程。
|
3月前
|
API 数据安全/隐私保护 Python
小红书批量发布协议, 抖音自动批量发布软件脚本,笔记作品视频自动发布工具【python】
这个工具框架包含了小红书和抖音的批量发布功能,支持图片和视频处理、定时发布等功能
|
11月前
|
缓存 监控 数据库
接口性能飞跃:一次成功的优化实践
在软件开发中,接口性能优化是一个永恒的话题。一个高效的接口不仅能提升用户体验,还能减轻服务器压力,降低运营成本。本文将分享一次成功的接口优化案例,从问题诊断到解决方案实施,详细介绍我们的优化过程。
193 0
数据结构堆排序中堆的建立、调整、插入、删除等操作的详解(题目讲解 简单易懂)
数据结构堆排序中堆的建立、调整、插入、删除等操作的详解(题目讲解 简单易懂)
855 0
|
计算机视觉 Python
Flask学习笔记(六):基于Flask的摄像头-web显示代码(可直接使用)
这篇文章是关于如何使用Flask框架结合OpenCV库,通过电脑摄像头实现视频流在网页上的实时显示,并提供了单摄像头和多摄像头的实现方法。
397 2
Flask学习笔记(六):基于Flask的摄像头-web显示代码(可直接使用)