文章目录

移动端流量已超过桌面端，本文介绍2026年移动端网站设计的最新规范和最佳实践。

  • 先设计移动版
  • 再扩展到桌面
  • 渐进增强

断点 设备 视口宽度
xs 手机竖屏 <576px
sm 手机横屏 ≥576px
md 平板竖屏 ≥768px
lg 平板横屏 ≥992px
xl 小桌面 ≥1200px
xxl 大桌面 ≥1400px 

/* 组件级响应式 */
.card-container {
    container-type: inline-size;
}

@container (min-width: 400px) {
    .card {
        display: grid;
        grid-template-columns: 1fr 2fr;
    }
}

指标 目标 说明
LCP <2.5s 首屏加载
FID <100ms 交互响应
CLS <0.1 布局稳定
INP <200ms 交互延迟 

<!-- 响应式图片 -->
<img srcset="img-400.jpg 400w,
             img-800.jpg 800w,
             img-1200.jpg 1200w"
     sizes="(max-width: 400px) 400px,
            (max-width: 800px) 800px,
            1200px"
     src="img-800.jpg"
     alt="移动端优化图片">

<!-- AVIF/WebP格式 -->
<picture>
    <source srcset="img.avif" type="image/avif">
    <source srcset="img.webp" type="image/webp">
    <img src="img.jpg" alt="兼容格式">
</picture>


<!-- 原生懒加载 -->
<img src="placeholder.jpg" data-src="real.jpg" loading="lazy" alt="">

<!-- 视频懒加载 -->
<video poster="poster.jpg" preload="none">
    <source src="video.mp4" type="video/mp4">
</video>

尺寸 说明
≥44×44px Apple HIG标准
≥48×48dp Material Design
<44×44px 需放大或加间距 

/* 按钮触摸效果 */
.button {
    transition: transform 0.1s ease, background-color 0.1s ease;
    -webkit-tap-highlight-color: transparent;
}

.button:active {
    transform: scale(0.96);
    opacity: 0.9;
}

/* 列表触摸高亮 */
.list-item:active {
    background-color: #f0f0f0;
}


// 滑动删除示例
const swipe = new Swipe({
    el: document.querySelector('.list-item'),
    onSwipeLeft: () => deleteItem(),
});


<nav class="bottom-nav">
    <a href="/" class="nav-item active">
        <span class="icon">🏠</span>
        <span class="label">首页</span>
    </a>
    <a href="/category" class="nav-item">
        <span class="icon">📦</span>
        <span class="label">分类</span>
    </a>
    <a href="/cart" class="nav-item">
        <span class="icon">🛒</span>
        <span class="label">购物车</span>
    </a>
    <a href="/user" class="nav-item">
        <span class="icon">👤</span>
        <span class="label">我的</span>
    </a>
</nav>

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    padding: 8px 0 env(safe-area-inset-bottom);
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}


/* 侧滑菜单 */
.menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
}

.menu-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100%;
    background: #fff;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

.menu-panel.open {
    transform: translateX(0);
}


{
    "name": "网站名称",
    "short_name": "简称",
    "start_url": "/",
    "display": "standalone",
    "background_color": "#ffffff",
    "theme_color": "#0066cc",
    "icons": [
        { "src": "/icon-192.png", "sizes": "192x192" },
        { "src": "/icon-512.png", "sizes": "512x512" }
    ]
}


// sw.js
const CACHE_NAME = 'v1';
const urls = ['/', '/styles.css', '/app.js'];

self.addEventListener('install', e => {
    e.waitUntil(
        caches.open(CACHE_NAME).then(cache => cache.addAll(urls))
    );
});

self.addEventListener('fetch', e => {
    e.respondWith(
        caches.match(e.request).then(r => r || fetch(e.request))
    );
});


<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">


curl "https://searchconsole.googleapis.com/v1/urlTesting_tools/mobileFriendlyTest/run" \
    -H "Content-Type: application/json" \
    -d '{"url": "https://example.com"}'

  • [ ] 触摸目标 ≥44px
  • [ ] 文字可读 ≥16px
  • [ ] 动画流畅 60fps
  • [ ] 图片响应式
  • [ ] 表单简化
  • [ ] 加载时间 <3s
  • [ ] 支持手势操作

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。