css3 media 模版

PC 优先的 @media 响应式模板

/* ===== PC First 响应式模板 ===== / / 1. 桌面端默认样式（≥1200px） */
body {
font-size: 18px;
background: #f8f9fa;
}

.header {
display: flex;
justify-content: space-between;
}

/* 2. 小桌面适配（≤1199px） */
@media (max-width: 1199px) {
.container {
width: 980px;
}
}

/* 3. 平板横屏适配（≤991px） */
@media (max-width: 991px) {
.header {
flex-direction: column;
}
}

/* 4. 平板竖屏适配（≤768px） */
@media (max-width: 768px) {
body {
font-size: 16px;
}
}

/* 5. 手机端适配（≤576px） */
@media (max-width: 576px) {
.header-logo {
width: 120px;
}
}

移动端优先

/* ===== 响应式 CSS 模板 ===== / / 1. 移动优先（默认样式） */
body {
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1.5;
margin: 0;
padding: 0;
}

/* 2. 小屏手机（≥576px） */
@media (min-width: 576px) {
body { font-size: 15px; }
}

/* 3. 平板（≥768px） */
@media (min-width: 768px) {
body { font-size: 16px; }
.container { padding: 0 20px; }
}

/* 4. 桌面（≥992px） */
@media (min-width: 992px) {
body { font-size: 17px; }
.sidebar { width: 250px; }
}

/* 5. 大桌面（≥1200px） */
@media (min-width: 1200px) {
body { font-size: 18px; }
.container { max-width: 1140px; }
}

/* 6. 超大屏（≥1400px） */
@media (min-width: 1400px) {
body { font-size: 20px; }
}