八、响应式工具

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>

来源：
https://qeext.cn/