html5的响应式布局的方法示例详解

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