菜鸟教程
教程 css tutorial

常见断点

响应式布局通常依赖媒体查询中的断点（Breakpoints），即根据设备的屏幕宽度分区，分别为不同的设备设置样式。

1. 常见屏幕尺寸分类

设备类型 屏幕宽度范围 常用断点
超小设备 小于 576px max-width: 575px
小型设备（手机） 576px - 767px min-width: 576px
中型设备（平板） 768px - 991px min-width: 768px
大型设备（桌面） 992px - 1199px min-width: 992px
超大设备 大于 1200px min-width: 1200px

这些断点值并非固定标准，可以根据项目需求灵活调整。

2. 示例：断点样式应用

css 
/* 小屏幕设备样式 */
@media (max-width: 575px) {
  .container {
    padding: 10px;
  }
}

/* 中等及以上设备样式 */
@media (min-width: 768px) {
  .container {
    padding: 40px;
  }
}

3. 建议做法

  • 使用 min-width：优先为小屏幕设置默认样式，再逐步增强（Mobile First）
  • 保持断点数量精简，利于维护
  • 使用 CSS 自定义变量统一管理断

常见断点示例

在线代码演示
源码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
<meta charset="UTF-8" />
<title>常见断点示例</title>
<style>
.container {
margin: 40px auto;
padding: 20px;
width: 80%;
background-color: #dcedc8;
text-align: center;
font-size: 18px;
border-radius: 8px;
}


@media (max-width: 575px) {
  .container {
    background-color: #ffcdd2;
    font-size: 14px;
  }
}

@media (min-width: 768px) {
  .container {
    background-color: #a5d6a7;
    font-size: 20px;
  }
}

@media (min-width: 1200px) {
  .container {
    background-color: #81d4fa;
    font-size: 22px;
  }
}



</style>
</head>


<body>
<div class="container">请调整浏览器宽度查看样式变化</div>
</body>


</html>

相关内容