news 2026/7/30 19:41:03

Foundation 网格 - 大型设备

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
Foundation 网格 - 大型设备

Foundation 网格系统在大型设备(Large Devices)上的行为

Foundation XY Grid 的large 断点默认对应屏幕宽度≥ 1024px(通常指桌面电脑、大型平板横屏或宽屏显示器)。

  • 移动优先原则:如果没有指定large-*类,列会继承 medium 或 small 的样式
  • 在 large 设备上,使用large-*类来覆盖前面的布局,实现最大宽度的水平并排、更精细的列分配(如 12 列细分成更多部分)。
  • 这时布局通常达到“最终状态”:充分利用宽屏空间,列并排显示,信息密度最高。
示例代码:在 large 设备上的典型响应式变化
<divclass="grid-x grid-padding-x"><divclass="cell small-12 medium-6 large-4"style="background:#fee;padding:20px;">列1</div><divclass="cell small-12 medium-6 large-4"style="background:#efe;padding:20px;">列2</div><divclass="cell small-12 medium-12 large-4"style="background:#eef;padding:20px;">列3</div></div>

效果说明

  • 小型设备(<640px):三列垂直堆叠,全宽。
  • 中型设备(≥640px ~ <1024px):列1 和 列2 并排(各 50%),列3 全宽下一行。
  • 大型设备(≥1024px):三列完全水平并排(各 4/12 ≈ 33.33%)。
大型设备常用类
  • large-数字:指定列宽(1~12)。
  • large-offset-数字:偏移。
  • large-up-n:块网格,每行 n 个。
  • large-auto/large-shrink:自动调整。
  • large-collapse:去除 gutter(间距)以紧凑显示。

在大型设备上,你可以充分利用 12 列系统创建复杂布局,如侧边栏 + 主内容 + 广告栏。如果你有特定的大型设备布局需求(如四列卡片、固定宽度容器等),提供细节,我可以给出定制代码!

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/7/28 17:32:20

好好看一下2025年网络安全有多卷!

最近在后台回复粉丝的问题&#xff0c;已经遇到不少211/985高校信息安全专业、做安全攻防/渗透方向&#xff0c;却没找到暑期实习的粉丝了。 背景都很不错&#xff0c;有的CTF竞赛拿过奖&#xff0c;有的跟着导师做过项目&#xff0c;他们的提问甚至让我有点吃惊。 坦白来说&…

作者头像 李华
网站建设 2026/7/27 21:33:07

Java+iTextPDF,实时生成与预览PDF文件的最佳实践!

&#x1f449; 这是一个或许对你有用的社群&#x1f431; 一对一交流/面试小册/简历优化/求职解惑&#xff0c;欢迎加入「芋道快速开发平台」知识星球。下面是星球提供的部分资料&#xff1a; 《项目实战&#xff08;视频&#xff09;》&#xff1a;从书中学&#xff0c;往事上…

作者头像 李华
网站建设 2026/7/30 7:38:55

小团队 CI/CD 实践:无需运维,Java Web应用的自动化部署

&#x1f449; 这是一个或许对你有用的社群&#x1f431; 一对一交流/面试小册/简历优化/求职解惑&#xff0c;欢迎加入「芋道快速开发平台」知识星球。下面是星球提供的部分资料&#xff1a; 《项目实战&#xff08;视频&#xff09;》&#xff1a;从书中学&#xff0c;往事上…

作者头像 李华
网站建设 2026/7/29 10:21:44

C++ CRTP 替代虚函数

基本原理&#xff1a;CRTP&#xff08;Curiously Recurring Template Pattern&#xff09;是一种 C 编程设计模式&#xff0c;类似于 RAII、SFINAE、这些东西。核心思想只有一个东西&#xff1a;即派生类继承以自身为模板参数的基类模板&#xff0c;这样子呢&#xff0c;在 C 编…

作者头像 李华
网站建设 2026/7/29 5:39:33

中电金信:智能辅助审单方案让跨境金融审核又快又准

在跨境金融业务中&#xff0c;审单工作一直是一项重要但繁琐的任务。让银行工作人员为堆积如山的国际信用证、商业发票、海运提单等单据而头疼&#xff1f;传统人工审单不仅耗时耗力&#xff0c;还容易因规则复杂、经验依赖性强而出现疏漏&#xff0c;影响业务效率与风险控制。…

作者头像 李华
网站建设 2026/7/30 5:18:13

虚拟专用网络门户的恶意扫描激增40倍

最近&#xff0c;一场针对某虚拟专用网络V/P/N的全球性扫描狂潮悄然来袭。从2025年11月14日起&#xff0c;针对该V/P/N门户的恶意扫描在24小时内狂飙40倍。按照“大规模扫描先行&#xff0c;攻击随后而至”的网络安全铁律&#xff0c;再结合近两年Ivanti、Fortinet、Cisco等多家…

作者头像 李华