news 2026/6/24 15:00:30

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/6/23 23:10:57

Foundation 网格实例

Foundation XY Grid 常见实例 以下是几个实用 Foundation XY Grid 的完整代码实例&#xff0c;涵盖响应式布局、块状网格、偏移、对齐等常见场景。你可以直接复制到 HTML 文件中测试&#xff08;需引入 Foundation CSS/JS&#xff09;。 1. 基本响应式三列布局&#xff08;经…

作者头像 李华
网站建设 2026/6/23 17:26:29

kotaemon社区支持全攻略:从安装到问答

kotaemon社区支持全攻略&#xff1a;从安装到问答 在企业级智能对话系统开发中&#xff0c;一个常见的痛点是&#xff1a;如何让AI既具备强大的语言生成能力&#xff0c;又能准确引用内部知识库中的信息&#xff1f;许多团队尝试过简单的“文档上传大模型”方案&#xff0c;但…

作者头像 李华
网站建设 2026/6/23 21:36:52

原始数据—>张量转换后会丢失原始数据吗

学习李沐香蕉目标检测时疑问原始数据 → 张量的转换链路&#xff08;全程可回溯&#xff09;:1. 图像原始数据的转换链路硬盘上的.png文件&#xff08;原始数据&#xff09;↓ 由torchvision.io.read_image读取单个图像张量&#xff08;uint8&#xff0c;[C,H,W]&#xff09;→…

作者头像 李华
网站建设 2026/6/24 5:55:17

年薪15-30万很普遍?女生更受青睐?零基础转行网络安全的黄金期到了!

数字化浪潮席卷全球&#xff0c;云计算、物联网、大数据、人工智能等技术深度融入生产生活的方方面面。 与此同时&#xff0c;网络攻击事件频发&#xff0c;数据泄露、勒索病毒、系统瘫痪等安全威胁日益严峻&#xff0c;对国家安全、企业运营和个人隐私构成巨大挑战。 在此背…

作者头像 李华
网站建设 2026/6/23 20:14:48

ACE-Step:开源AI音乐生成模型快速上手

ACE-Step&#xff1a;开源AI音乐生成模型快速上手 政安晨的个人主页&#xff1a;政安晨 欢迎 &#x1f44d;点赞✍评论⭐收藏 希望政安晨的博客能够对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff01; 你有没有想过&#xff0c;有一天只需输…

作者头像 李华
网站建设 2026/6/23 18:03:52

多模态向量检索技术深度解析:从理论突破到产业实践

多模态向量检索技术深度解析&#xff1a;从理论突破到产业实践 【免费下载链接】qdrant Qdrant - 针对下一代人工智能的高性能、大规模向量数据库。同时提供云端版本 项目地址: https://gitcode.com/GitHub_Trending/qd/qdrant 在人工智能技术快速发展的当下&#xff0c…

作者头像 李华