八、响应式工具
8.1 可见性工具（Visibility）
UIkit 提供了一套强大的响应式可见性工具类，允许你根据不同屏幕尺寸显示或隐藏元素。
可见性类列表：
<!-- 移动端汉堡菜单图标：仅在手机和平板上显示 -->
<div class="uk-hidden@m">
<button class="uk-button uk-button-default uk-margin-small-right" type="button" uk-toggle="target: #offcanvas-nav">
<span uk-icon="icon: menu"></span>
</button>
</div>
<!-- 桌面端完整导航栏：仅在桌面及以上显示 -->
<nav class="uk-visible@m">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">关于</a></li>
</ul>
</nav>
<!-- 混合使用示例：不同设备显示不同内容 -->
<div class="uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m uk-grid" uk-grid>
<!-- 手机显示2列，平板显示3列，桌面显示4列 -->
</div>
<!-- 响应式图片 -->
<img class="uk-visible@s" src="image-large.jpg" alt="桌面端图片">
<img class="uk-hidden@s" src="image-small.jpg" alt="移动端图片">
8.2 响应式宽度（Width）
UIkit 的宽度工具允许在不同断点下设置不同的宽度百分比。
<!-- 基础宽度类 -->
<div class="uk-width-1-2">占 50% 宽度</div>
<div class="uk-width-1-3">占 33.33% 宽度</div>
<div class="uk-width-2-3">占 66.67% 宽度</div>
<div class="uk-width-1-4">占 25% 宽度</div>
<div class="uk-width-3-4">占 75% 宽度</div>
<!-- 响应式宽度：手机全宽，平板半宽，桌面 1/3 -->
<div class="uk-width-1-1 uk-width-1-2@s uk-width-1-3@m">
响应式内容
</div>
<!-- 宽度自动适应 -->
<div class="uk-width-auto">宽度根据内容自动调整</div>
<div class="uk-width-expand">宽度扩展填充剩余空间</div>
<!-- 响应式宽度类组合 -->
<div class="uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m uk-grid" uk-grid>
<div>卡片1</div>
<div>卡片2</div>
<div>卡片3</div>
<div>卡片4</div>
</div>
8.3 响应式文本对齐
<!-- 默认左对齐，桌面端居中对齐 -->
<p class="uk-text-left uk-text-center@m">
在不同设备上文本对齐方式不同
</p>
<!-- 手机左对齐，平板居中对齐，桌面右对齐 -->
<p class="uk-text-left uk-text-center@s uk-text-right@m">
响应式文本对齐
</p>
<!-- 响应式文本大小 -->
<p class="uk-text-small uk-text-normal@s uk-text-large@m">
响应式文本大小
</p>
8.4 响应式间距
<!-- 响应式外边距 -->
<div class="uk-margin-small uk-margin-medium@s uk-margin-large@m">
间距随屏幕尺寸增大而增大
</div>
<!-- 响应式内边距 -->
<div class="uk-padding-small uk-padding@s uk-padding-large@m uk-padding-xlarge@l">
内边距随屏幕尺寸变化
</div>
<!-- 响应式网格间距 -->
<div class="uk-grid uk-grid-small uk-grid-medium@s uk-grid-large@m" uk-grid>
<div class="uk-width-1-3">间距响应式</div>
<div class="uk-width-1-3">间距响应式</div>
<div class="uk-width-1-3">间距响应式</div>
</div>
8.5 响应式显示（Display）
<!-- 响应式显示类型 -->
<div class="uk-display-block uk-display-inline-block@s uk-display-flex@m">
在不同设备上使用不同的显示类型
</div>
<!-- 移动端使用 flex 列布局，桌面端使用 flex 行布局 -->
<div class="uk-flex uk-flex-column uk-flex-row@m">
<div>项目1</div>
<div>项目2</div>
<div>项目3</div>
</div>
8.6 响应式浮动
<!-- 手机端不浮动，桌面端右浮动 -->
<div class="uk-float-right@m">
响应式浮动
</div>
<!-- 清除浮动 -->
<div class="uk-clearfix">
<div class="uk-float-left uk-float-right@s">内容</div>
</div>
8.7 响应式定位
<!-- 响应式定位 -->
<div class="uk-position-relative uk-position-static@s">
相对定位内容，在平板及以上变为静态定位
</div>
<!-- 响应式固定位置 -->
<div class="uk-position-fixed uk-position-fixed@m">
仅在桌面端固定定位
</div>
8.8 实用响应式示例
<!-- 完整的响应式导航栏示例 -->
<header>
<!-- 移动端汉堡菜单 -->
<div class="uk-hidden@m">
<button class="uk-button uk-button-default" uk-toggle="target: #offcanvas-nav">
<span uk-icon="icon: menu"></span>
</button>
</div>
<!-- 桌面端水平导航 -->
<nav class="uk-visible@m">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">关于</a></li>
</ul>
</nav>
<!-- 移动端侧滑菜单 -->
<div id="offcanvas-nav" uk-offcanvas>
<div class="uk-offcanvas-bar">
<ul class="uk-nav uk-nav-default">
<li class="uk-active"><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">关于</a></li>
</ul>
</div>
</div>
</header>
<!-- 响应式卡片网格 -->
<div class="uk-child-width-1-1 uk-child-width-1-2@s uk-child-width-1-3@m uk-child-width-1-4@l uk-grid" uk-grid>
<div v-for="item in items" :key="item.id">
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">{
{ item.title }}</h3>
<p>{
{ item.description }}</p>
</div>
</div>
</div>
<!-- 响应式表单布局 -->
<form class="uk-form-stacked">
<div class="uk-grid" uk-grid>
<div class="uk-width-1-1 uk-width-1-2@s uk-width-1-3@m">
<label class="uk-form-label">姓名</label>
<input class="uk-input" type="text">
</div>
<div class="uk-width-1-1 uk-width-1-2@s uk-width-1-3@m">
<label class="uk-form-label">邮箱</label>
<input class="uk-input" type="email">
</div>
<div class="uk-width-1-1 uk-width-1-2@s uk-width-1-3@m">
<label class="uk-form-label">电话</label>
<input class="uk-input" type="tel">
</div>
</div>
</form>
