mcpField
M
mobile-responsiveness

mobile-responsiveness

github.com/hoodini设计与 UI2911.4k 次安装5 天前更新
代码仓库

关于 mobile-responsiveness

面向 Web 开发者的移动优先响应式设计指南，提供 CSS 断点、移动导航和安全区域处理等示例，帮助页面适配不同屏幕尺寸。

主要功能

  1. 01移动优先的 CSS 断点示例
  2. 02Tailwind 断点参考
  3. 03移动导航实现示例
  4. 04适配刘海屏与安全区域
  5. 05useMediaQuery Hook 示例

适用场景

  1. 01为网站构建移动优先布局
  2. 02实现适配手机的导航菜单
  3. 03处理刘海屏和底部指示区域
  4. 04根据媒体查询调整界面

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/hoodini/ai-agents-skills --skill mobile-responsiveness

安装后在 Claude Code 中输入/mobile-responsiveness确认已加载。

详细介绍

移动端响应式设计

构建响应式、移动端优先的 Web 应用。

移动端优先断点

/* Mobile first - no media query needed for mobile base */
.container {
  padding: 1rem;
}

/* Tablet */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    padding: 3rem;
    max-width: 1200px;
    margin: 0 auto;
  }
}

/* Large desktop */
@media (min-width: 1280px) {
  .container {
    max-width: 1400px;
  }
}

Tailwind 断点

<div className="
  p-4          /* Mobile: padding 1rem */
  md:p-8       /* Tablet 768px+: padding 2rem */
  lg:p-12      /* Desktop 1024px+: padding 3rem */
  xl:max-w-6xl /* Large 1280px+: max-width */
">
  <h1 className="
    text-2xl     /* Mobile */
    md:text-3xl  /* Tablet */
    lg:text-4xl  /* Desktop */
  ">
    Responsive Heading
  </h1>
</div>

流式排版

:root {
  /* Fluid font size: 16px at 320px viewport, 20px at 1200px viewport */
  --font-size-base: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  
  /* Fluid heading */
  --font-size-h1: clamp(2rem, 1.5rem + 2.5vw, 4rem);
}

body {
  font-size: var(--font-size-base);
}

h1 {
  font-size: var(--font-size-h1);
}

触摸交互

import { useState } from 'react';

function SwipeableCard({ onSwipeLeft, onSwipeRight, children }) {
  const [touchStart, setTouchStart] = useState<number | null>(null);
  const [touchEnd, setTouchEnd] = useState<number | null>(null);

  const minSwipeDistance = 50;

  const onTouchStart = (e: React.TouchEvent) => {
    setTouchEnd(null);
    setTouchStart(e.targetTouches[0].clientX);
  };

  const onTouchMove = (e: React.TouchEvent) => {
    setTouchEnd(e.targetTouches[0].clientX);
  };

  const onTouchEnd = () => {
    if (!touchStart || !touchEnd) return;
    
    const distance = touchStart - touchEnd;
    const isLeftSwipe = distance > minSwipeDistance;
    const isRightSwipe = distance < -minSwipeDistance;
    
    if (isLeftSwipe) onSwipeLeft?.();
    if (isRightSwipe) onSwipeRight?.();
  };

  return (
    <div
      onTouchStart={onTouchStart}
      onTouchMove={onTouchMove}
      onTouchEnd={onTouchEnd}
    >
      {children}
    </div>
  );
}

移动端导航

import { useState } from 'react';

function MobileNav() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      {/* Hamburger button - visible on mobile */}
      <button
        className="md:hidden p-2"
        onClick={() => setIsOpen(!isOpen)}
        aria-expanded={isOpen}
        aria-label="Toggle menu"
      >
        <span className={`hamburger ${isOpen ? 'open' : ''}`} />
      </button>

      {/* Mobile menu */}
      <nav
        className={`
          fixed inset-0 bg-white z-50 transform transition-transform
          ${isOpen ? 'translate-x-0' : '-translate-x-full'}
          md:static md:translate-x-0 md:bg-transparent
        `}
      >
        <ul className="flex flex-col md:flex-row gap-4 p-4 md:p-0">
          <li><a href="/">Home</a></li>
          <li><a href="/about">About</a></li>
          <li><a href="/contact">Contact</a></li>
        </ul>
      </nav>

      {/* Backdrop */}
      {isOpen && (
        <div
          className="fixed inset-0 bg-black/50 z-40 md:hidden"
          onClick={() => setIsOpen(false)}
        />
      )}
    </>
  );
}

安全区域（刘海屏／Home 指示条）

/* Account for iPhone notch and home indicator */
.container {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
}

/* Fixed bottom navigation */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

Viewport Meta 标签

<meta 
  name="viewport" 
  content="width=device-width, initial-scale=1, viewport-fit=cover"
/>

useMediaQuery Hook

import { useState, useEffect } from 'react';

function useMediaQuery(query: string): boolean {
  const [matches, setMatches] = useState(false);

  useEffect(() => {
    const media = window.matchMedia(query);
    setMatches(media.matches);

    const listener = (e: MediaQueryListEvent) => setMatches(e.matches);
    media.addEventListener('change', listener);
    
    return () => media.removeEventListener('change', listener);
  }, [query]);

  return matches;
}

// Usage
function Component() {
  const isMobile = useMediaQuery('(max-width: 767px)');
  const isTablet = useMediaQuery('(min-width: 768px) and (max-width: 1023px)');
  const isDesktop = useMediaQuery('(min-width: 1024px)');

  return isMobile ? <MobileView /> : <DesktopView />;
}

资源

评论

支持 Markdown