跳至主要内容
web.dev for China
  • 网络平台
  • 您可以按照自己的节奏深入了解 Web 平台。
  • HTML
  • CSS
  • JavaScript
  • 用户体验
  • 了解如何打造更好的用户体验。
  • 效果
  • 无障碍
  • 身份
  • 学习
  • 快速了解 Web 开发。
  • 了解 HTML
  • 了解 CSS
  • 了解 JavaScript
  • 了解性能
  • 了解无障碍功能
  • 更多课程
  • 其他资源
  • 探索内容集、图案等。
  • AI 和 Web
  • 探索
  • PageSpeed Insights
  • 模式
  • 播客和节目
  • 开发者简报
  • 关于 web.dev
基准 博客 案例研究
/
  • English
  • Deutsch
  • Español – América Latina
  • Français
  • Indonesia
  • Italiano
  • Polski
  • Português – Brasil
  • Tiếng Việt
  • Türkçe
  • Русский
  • עברית
  • العربيّة
  • فارسی
  • हिंदी
  • বাংলা
  • ภาษาไทย
  • 中文 – 简体
  • 中文 – 繁體
  • 日本語
  • 한국어
web.dev for China
  • 资源
    • 更多
  • 基准
  • 博客
  • 案例研究
  • 网络平台
  • HTML
  • CSS
  • JavaScript
  • 用户体验
  • 效果
  • 无障碍
  • 身份
  • 学习
  • 了解 HTML
  • 了解 CSS
  • 了解 JavaScript
  • 了解性能
  • 了解无障碍功能
  • 更多课程
  • 其他资源
  • AI 和 Web
  • 探索
  • PageSpeed Insights
  • 模式
  • 播客和节目
  • 开发者简报
  • 关于 web.dev
此页面由 Cloud Translation API 翻译。
  • 首页
  • Patterns

媒体模式

在网络上打造现代媒体体验，实现出色的音频和视频播放体验。
  • 解构煎饼
  • 宽高比图片卡片
  • Container query card
  • Gentle Flex
  • Autobot
  • Pancake stack
  • Clamping card
  • RAM (Repeat, Auto, Minmax)
  • Holy grail layout
  • Fluffy Center
  • Line up
  • Super centered
  • Sidebar says
  • Pop n' Plop
  • Content Center
  • 12-span grid
12

  • web.dev

    • web.dev

      我们希望帮助您构建美观、易于访问、快速且安全的网站，从而能跨浏览器并为您的所有用户提供服务。本网站包含各种内容，由 Chrome 团队成员及外部专家撰写，可协助您顺利踏上这一旅程。

  • 参与

    • 提交 bug
    • 查看未处理完毕的问题

  • 相关内容

    • Chrome 开发者版
    • Chromium 更新
    • 案例研究
    • 播客和节目

  • 关注

    • 关于 X 的 @ChromiumDev
    • YouTube
    • LinkedIn 上的 Chrome for Developers
    • RSS
  • 条款
  • 隐私权政策
  • Manage cookies
  • English
  • Deutsch
  • Español – América Latina
  • Français
  • Indonesia
  • Italiano
  • Polski
  • Português – Brasil
  • Tiếng Việt
  • Türkçe
  • Русский
  • עברית
  • العربيّة
  • فارسی
  • हिंदी
  • বাংলা
  • ภาษาไทย
  • 中文 – 简体
  • 中文 – 繁體
  • 日本語
  • 한국어