以下是HTML5实现响应式布局的5种核心方法及代码示例：

1. 媒体查询（核心方案）

/* 默认样式（移动优先） */
.container {
   
  padding: 15px;
}

/* 中等屏幕（平板） */
@media (min-width: 768px) {
   
  .container {
   
    padding: 30px;
    max-width: 720px;
  }
}

/* 大屏幕（桌面） */
@media (min-width: 1200px) {
   
  .container {
   
    max-width: 1140px;
  }
}

2. 流动布局

<div class="fluid-container">
  <div class="main-content">主内容区（70%）</div>
  <div class="sidebar">侧边栏（30%）</div>
</div>

<style>
.fluid-container {
     
  width: 90%;
  margin: 0 auto;
}

.main-content {
     
  width: 70%