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 完整参数配置参考文档
459 0
|
算法
【MATLAB】语音信号识别与处理:一维信号NLM非局部均值滤波算法去噪及谱相减算法呈现频谱
【MATLAB】语音信号识别与处理:一维信号NLM非局部均值滤波算法去噪及谱相减算法呈现频谱
391 1
|
Windows
禁止ie自动跳转edge
禁止ie自动跳转edge
560 0
|
6月前
|
API 数据安全/隐私保护 Python
小红书批量发布协议, 抖音自动批量发布软件脚本,笔记作品视频自动发布工具【python】
这个工具框架包含了小红书和抖音的批量发布功能,支持图片和视频处理、定时发布等功能
数据结构堆排序中堆的建立、调整、插入、删除等操作的详解(题目讲解 简单易懂)
数据结构堆排序中堆的建立、调整、插入、删除等操作的详解(题目讲解 简单易懂)
1188 0
|
缓存 Java API
API接口性能优化管理
在数字化时代,API性能优化对于提升软件效率和用户体验至关重要。本文介绍了多种优化方法:配置优化包括调整JVM参数等;代码层面减少重复调用并批量操作数据库;池化技术如线程池和HTTP连接池能有效利用资源;数据库优化通过索引提高查询速度;异步处理则使主流程业务不受阻塞;缓存策略如Redis缓存减少数据库访问;可观测性工具如日志平台和APM帮助监控性能。综合运用这些方法,可根据业务需求持续调整优化,显著提升API性能及用户体验。
|
移动开发 前端开发 HTML5
HTML5实现酷炫个人产品推广、工具推广、信息推广、个人主页、个人介绍、酷炫官网、门户网站模板源码
HTML5实现酷炫个人产品推广、工具推广、信息推广、个人主页、个人介绍、酷炫官网、门户网站模板源码
|
算法 定位技术
m基于matlab的GPS卫星信号捕获和数据解析仿真
m基于matlab的GPS卫星信号捕获和数据解析仿真
502 0
m基于matlab的GPS卫星信号捕获和数据解析仿真
|
Linux API 调度
关于在Linux内核中使用不同延迟/休眠机制 【ChatGPT】
关于在Linux内核中使用不同延迟/休眠机制 【ChatGPT】