七、响应式工具类

7.1 显示与隐藏工具
Foundation提供了一系列工具类，用于在不同屏幕尺寸下控制元素的显示与隐藏：

<!-- 在所有设备上隐藏 -->
<div class="hide">始终隐藏</div>

<!-- 仅在特定断点隐藏 -->
<div class="show-for-medium">在中等及以上屏幕显示，小屏幕隐藏</div>
<div class="hide-for-medium">在中等及以上屏幕隐藏，小屏幕显示</div>

<!-- 组合使用 -->
<div class="show-for-small-only">仅在小屏幕显示</div>
<div class="show-for-medium-only">仅在中等屏幕显示</div>
<div class="show-for-large-only">仅在大屏幕显示</div>

<!-- 针对触摸屏的显示控制 -->
<div class="hide-for-touch">仅非触摸屏设备显示</div>
<div class="show-for-touch">仅触摸屏设备显示</div>

7.2 浮动与清除

<div class="clearfix">
    <div class="float-left">左浮动</div>
    <div class="float-right">右浮动</div>
</div>

7.3 文本对齐工具

<p class="text-left">左对齐</p>
<p class="text-center">居中对齐</p>
<p class="text-right">右对齐</p>
<p class="text-justify">两端对齐</p>

<!-- 响应式文本对齐 -->
<p class="text-center medium-text-left">小屏居中，中屏及以上左对齐</p>

7.4 间距工具
Foundation提供了多种间距工具类（基于$global-margin和$global-padding变量）：

<!-- 边距 -->
<div class="margin-0">无外边距</div>
<div class="margin-1">1个单位外边距</div>
<div class="margin-vertical-2">垂直方向2个单位外边距</div>
<div class="margin-horizontal-3">水平方向3个单位外边距</div>

<!-- 内边距 -->
<div class="padding-0">无内边距</div>
<div class="padding-1">1个单位内边距</div>

7.5 Flexbox对齐工具

<!-- 垂直对齐 -->
<div class="align-top">顶部对齐</div>
<div class="align-middle">垂直居中</div>
<div class="align-bottom">底部对齐</div>

<!-- 水平对齐 -->
<div class="align-left">左对齐</div>
<div class="align-center">水平居中</div>
<div class="align-right">右对齐</div>
<div class="align-justify">两端对齐</div>

八、性能优化与最佳实践

8.1 按需加载
https://rvtst.cn/category/ai.html
Foundation的JavaScript插件支持按需加载，可以显著减小页面体积：

// 只加载需要的插件
import { Dropdown, Tabs, Accordion } from 'foundation-sites';

// 而不是全量加载
// import 'foundation-sites';

8.2 使用Sass精简CSS
通过Sass按需引入组件，可以有效减小CSS体积：

// 不要使用 foundation-everything
// @include foundation-everything;

// 按需引入
@include foundation-global-styles;
@include foundation-typography;
@include foundation-grid;
@include foundation-button;
@include foundation-forms;
@include foundation-accordion;
@include foundation-tabs;

8.3 合并请求
对于JavaScript文件，建议使用构建工具（如Gulp、Webpack）合并所有插件文件，减少HTTP请求数量。

8.4 移动优先设计原则
从小屏开始设计：先确保内容在小屏幕上完整可读，再通过媒体查询增强大屏体验

渐进增强：为小屏提供核心功能，为大屏添加增强特性

触控优化：确保按钮和交互元素有足够的点击区域（至少44×44像素）

图片优化：使用响应式图片技术，根据屏幕尺寸加载合适大小的图片

8.5 语义化HTML
Foundation鼓励使用语义化的HTML结构，避免过度依赖框架类名：

<!-- 推荐：使用语义化标签 + 少量框架类 -->
<article class="card">
    <h2 class="card-title">文章标题</h2>
    <p class="card-content">文章内容...</p>
</article>

<!-- 不推荐：过度使用框架类名 -->
<div class="card">
    <div class="card-divider">
        <h2>文章标题</h2>
    </div>
    <div class="card-section">
        <div class="callout primary">
            <p>文章内容...</p>
        </div>
    </div>
</div>

Foundation作为全球第一款专业的响应式前端框架，以其开创性的移动优先设计、强大的定制能力和企业级的专业品质，在全球范围内积累了数百万用户。虽然在国内市场不如Bootstrap普及，但其在技术理念上的先进性使其始终是专业开发者的优选方案。
来源：
https://rvtst.cn/