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

酷爱码

于 2025-05-23 05:45:13 发布

阅读量1k

点赞数 18

CC 4.0 BY-SA版权

分类专栏：编程学习文章标签： html5 前端 html

本文链接：https://blog.csdn.net/huayula/article/details/148153086

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