以下是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%