/* ============================================================ ToySoHard 自适应样式(手机 / 平板 / 电脑) 由每个页面在 末尾 引入,统一接管响应式。 断点: 电脑 >900px(默认) / 平板 601–900px(各页内联已有) / 手机 ≤600px / 超小屏 ≤380px ============================================================ */ /* 全局安全网: 防止任何溢出导致横向滚动 */ body { overflow-x: hidden; } img { max-width: 100%; height: auto; } /* 触摸友好: 链接/按钮去掉点击高亮, 提升手感 */ a, button { -webkit-tap-highlight-color: transparent; } /* ============ 扫码进店 组件(首页区块 + 各页页脚共用) ============ */ .scan-visit { display: flex; align-items: center; gap: 14px; background: var(--surface, #fff); border: 1px solid var(--line, #f6e6ea); border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow, 0 8px 30px rgba(120,30,60,.10)); } .scan-visit .scan-qr { width: 92px; height: 92px; border-radius: 10px; flex: 0 0 auto; background: #fff; padding: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.08); } .scan-visit .scan-txt { font-size: 13px; line-height: 1.5; min-width: 0; } .scan-visit .scan-txt b { display: block; font-size: 14px; margin-bottom: 4px; color: var(--ink, #2a1622); } .scan-visit .scan-txt a { color: var(--brand, #ff3d7f); word-break: break-all; font-size: 12px; font-weight: 700; } .scan-section .sec-head { margin-bottom: 14px; } /* ===================== 手机 ≤600px ===================== */ @media (max-width: 600px) { /* 容器留白收窄 */ .wrap { padding: 0 14px; } /* 顶栏: 允许换行, 隐藏次要文字导航(分类/热门/促销/继续购物), 保留 logo / 语言 / 会员 / 购物车 */ .nav { flex-wrap: wrap; height: auto; padding: 8px 0; gap: 10px; } .nav-actions { gap: 10px; flex-wrap: wrap; } .nav-actions > a:not(.cart) { display: none; } .logo { font-size: 18px; } .logo .dot { width: 30px; height: 30px; } .logo small { font-size: 10px; } /* 网格: 分类 2 列(电商常见), 商品/秒杀保持 2 列, 页脚转 1 列 */ .cats { grid-template-columns: repeat(2, 1fr); gap: 12px; } .foot { grid-template-columns: 1fr; gap: 20px; } .foot .about { max-width: 100%; } /* Hero 进一步缩小 */ .slide { height: 240px; padding: 0 20px; } .slide h2 { font-size: 22px; } .slide .th { font-size: 13px; } .slide p { font-size: 14px; margin-bottom: 16px; } .slide .deco { font-size: 90px; right: -20px; } .carousel-dots { left: 20px; bottom: 12px; } /* 区块间距与标题 */ section { margin-top: 34px; } .sec-head { margin-bottom: 16px; } .sec-head h3 { font-size: 20px; } /* 商品卡片缩小 */ .card .thumb { height: 150px; } .card .title { font-size: 13px; min-height: 32px; } .card .price .now { font-size: 18px; } .card .buy { padding: 9px; font-size: 12px; } /* 促销区标题字号 */ .promo-card .pt { font-size: 19px; } .promo-card { padding: 20px; min-height: 150px; } /* TikTok 引流 CTA 间距 */ .tiktok-cta { padding: 22px; gap: 14px; } .tiktok-cta .tk-ic { font-size: 44px; } .tiktok-cta .tc-txt h4 { font-size: 18px; } /* 语言切换触摸区域加大 */ .lang-sw button { padding: 8px 13px; } /* 内容页(info) */ main { padding: 22px 14px 44px; } .card { padding: 22px 18px; } .card h1 { font-size: 24px; } /* 管理页(sync) 列映射改为竖排 */ .map-row { flex-direction: column; align-items: stretch; gap: 5px; } .map-row .k { width: auto; } .map-row select, .map-row input { max-width: none; } /* 扫码进店: 超小空间也可竖排 */ .scan-visit { gap: 12px; } } /* ===================== 超小屏 ≤380px ===================== */ @media (max-width: 380px) { .grid, .flash-grid, .related .grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .cats { grid-template-columns: repeat(2, 1fr); } .slide h2 { font-size: 20px; } .scan-visit { flex-direction: column; text-align: center; } .scan-visit .scan-txt a { display: inline-block; } } /* ===================== 商品详情页(product) 手机微调 ===================== */ @media (max-width: 600px) { .gallery .main { height: 260px; } .gallery .thumbs { grid-template-columns: repeat(4, 1fr); gap: 8px; } .gallery .thumbs div { height: 64px; } .info h1 { font-size: 22px; } .info .th { font-size: 13px; } .price-box .now { font-size: 28px; } .price-box .now small { font-size: 16px; } .actions button, .actions a { min-width: 120px; padding: 13px; font-size: 14px; } .related .grid { grid-template-columns: repeat(2, 1fr); } .perks { grid-template-columns: 1fr; } .tab-head button { padding: 12px 12px; font-size: 13px; } .spec-table td:first-child { width: 120px; } } /* ===================== 购物车(cart) 手机: 行堆叠 ===================== */ @media (max-width: 600px) { .row { flex-wrap: wrap; align-items: flex-start; } .row .pic { width: 64px; height: 64px; } .row .info { min-width: 0; } .row .right { flex: 0 0 100%; width: 100%; flex-direction: row; align-items: center; justify-content: space-between; margin-top: 8px; } .summary { padding: 18px; } .summary .go { padding: 13px; } } /* ===================== 结账(checkout) 手机微调 ===================== */ @media (max-width: 600px) { h1.ttl { font-size: 21px; } .steps .s { font-size: 11px; padding: 10px 4px; } .steps .s .n { margin-right: 4px; } .panel { padding: 18px; } .grid2 { grid-template-columns: 1fr; } .actions { flex-direction: column; } .actions button, .actions a { width: 100%; } .pay label { padding: 13px; } .qr svg { width: 150px; height: 150px; } }