AI 助理
备案控制台
开发者社区 云原生 文章 正文

Foundation 均衡器(Equalizer)2

2024-11-24 19
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 通过在均衡器上添加 `data-equalizer-mq="value"` 属性，可为不同屏幕尺寸设置相同高度。值包括 `medium-up`（>40.063em）、`large-up`（>64.063em）、`xlarge-up`（>90.063em）和 `xxlarge-up`（>120.063em）。嵌套内容时，需为 `data-equalizer` 和 `data-equalizer-watch` 属性添加相同值以连接至均衡器容器。

不同屏幕的均衡器
在均衡器上通过添加 data-equalizer-mq="value" 属性为不同屏幕尺寸设置相同高度。值可以是以下之一：

值 描述 实例
medium-up 默认。 创建相同高度的容器，宽度大于 40.063em
large-up 创建相同高度的容器，宽度大于 64.063em 尝试一下
xlarge-up 创建相同高度的容器，宽度大于 90.063em 尝试一下
xxlarge-up 创建相同高度的容器，宽度大于 120.063em 尝试一下
嵌套内容
为 data-equalizer 和 data-equalizer-watch 属性添加相同的值。 这会一起连接到均衡器容器。 重复多次嵌套均衡器，确保他们是匹配的：

实例




Panel






Nested Panel


Lorem ipsum...




Nested Panel


Lorem ipsum...




Nested Panel


Lorem ipsum...










Panel


Ut enim...






Panel


Lorem ipsum....




文章标签：
容器
游客bl53zvy3izljy
目录
相关文章
游客bl53zvy3izljy
|
2月前
|
JavaScript 前端开发 容器
Foundation 均衡器(Equalizer)1
在 Foundation 框架中，通过在容器元素上添加 `data-equalizer` 属性，并在其子元素上添加 `data-equalizer-watch` 属性，可以创建一个使所有子元素高度一致的均衡器。最高元素的高度将决定其他元素的高度。需初始化 Foundation JS。
游客bl53zvy3izljy
24 0
游客bl53zvy3izljy
|
2月前
Foundation 网格 - 中型设备
在Foundation网格系统中，针对中型设备（屏幕尺寸40.0625em至64.0624em），推荐使用50%/50%的布局比例，并通过`.medium-*`类实现。此布局在小型设备上默认为25%/75%，而在中型设备上调整为50%/50%，确保布局适应不同屏幕尺寸。示例中展示了如何在中型设备上应用这一布局。
游客bl53zvy3izljy
23 1
游客bl53zvy3izljy
|
2月前
Foundation 网格系统1
Foundation 网格系统基于12列布局，支持响应式设计，能自动适应不同屏幕尺寸。通过 .small、.medium 和 .large 类别，可针对手机、平板和电脑等设备创建灵活的布局。每行内的列数总和需为12，如 <div class="small-12 columns"> 表示100%宽度，<div class="small-8 columns"> 和 <div class="small-4 columns"> 分别表示66.6%和33.3%宽度。
游客bl53zvy3izljy
24 0
游客bl53zvy3izljy
|
2月前
|
前端开发 容器
Foundation 网格系统2
Foundation 网格系统适用于不同设备，包括手机、平板和桌面设备，支持12列布局，具备内嵌、偏移及列排序功能。在宽屏设备上，网格最大宽度为62.5rem，可通过CSS调整max-width或使用背景色跨越全页。
游客bl53zvy3izljy
21 0
运维开发故事
|
存储 安全 网络安全
禅与计算机维修艺术之fusion computer虚拟机存储恢复
禅与计算机维修艺术之fusion computer虚拟机存储恢复
运维开发故事
344 0
禅与计算机维修艺术之fusion computer虚拟机存储恢复
温柔的养猫人
|
内存技术 Go Windows
带你读《计算机组成与体系结构：性能设计（英文版·原书第10版）》之一：Basic Concepts and Computer Evolution
本书以Intel x86体系结构和ARM两个处理器系列为例，将当代计算机系统性能设计问题与计算机组成的基本概念和原理紧密联系起来，介绍了当代计算机体系结构的主流技术和最新技术。本书作者曾13次获a得美国教材和学术专著作者协会颁发的年度最佳计算机科学教材奖。目前，他是一名独立顾问，为众多计算机和网络制造商、软件开发公司以及政府前沿研究机构提供服务。
温柔的养猫人
3037 0
happenlee
|
算法 数据库
线性一致性与全序广播------《Designing Data-Intensive Applications》读书笔记12
上一篇聊了聊构建分布式系统所面临的困难，这篇将着重讨论构建容错分布式系统的算法与协议。构建容错系统的最佳方法是使用通用抽象，允许应用程序忽略分布式系统中的一些问题。
happenlee
1500 0
mcy247
|
缓存 NoSQL 大数据
第九回　Microsoft.Practices.Unity.Interception实现基于数据集的缓存（针对六，七，八讲的具体概念和配置的解说）
mcy247
1410 0
像教授
|
网络协议 测试技术 数据安全/隐私保护
Windows Fundamentals For Legacy PCs 企业IT老设备的救命稻草还是未来发展方向？！
像教授
1891 0
科技小先锋
|
存储
DPM磁盘管理（连接远端存储）（DPM配置管理系列三）
科技小先锋
1048 0