如何为平板与移动端定义不同CSS？解决仅其一生效的问题

这问题我碰到过好多次，核心问题大概率出在媒体查询的语法错误、断点范围定义不全或者样式层叠顺序不对上，咱们一步步来解决：

先排查你的现有代码问题 #

你提供的代码里平板的媒体查询明显没写完：@media (min-width: 768px) and (max-width: 102... —— 这种语法错误会直接导致浏览器忽略整个平板样式块，这肯定是其中一个原因。

正确的响应式CSS写法（桌面优先示例） #

通常我们会把桌面样式作为默认，然后用媒体查询覆盖平板和移动端的样式，注意要按屏幕尺寸从大到小的顺序写媒体查询（因为CSS是层叠生效的，后面的规则会覆盖前面的）：

<!DOCTYPE html>
<html>
<head>
<title>响应式表单示例</title>
<style type="text/css">
/* 桌面端默认样式（屏幕宽度 > 1024px） */
.form-container{
    width: 60%;
    margin-left: 20%;
    margin-right: 20%;
    background: blue;
}
.form-container-inner{
    padding: 20px;
}

/* 平板端样式（屏幕宽度 768px - 1024px） */
@media (min-width: 768px) and (max-width: 1024px) {
    .form-container{
        width: 80%;
        margin-left: 10%;
        margin-right: 10%;
        background: green; /* 换个颜色方便测试区分 */
    }
    .form-container-inner{
        padding: 15px;
    }
}

/* 移动端样式（屏幕宽度 < 768px） */
@media (max-width: 767px) {
    .form-container{
        width: 95%;
        margin-left: 2.5%;
        margin-right: 2.5%;
        background: orange; /* 区分不同设备的样式 */
    }
    .form-container-inner{
        padding: 10px;
    }
}
</style>
</head>
<body>
<div class="form-container">
    <div class="form-container-inner">
        <!-- 这里放你的表单内容 -->
        <p>测试响应式容器效果</p>
    </div>
</div>
</body>
</html>

关键注意事项 #

• 语法要完整：每个媒体查询的括号、条件都要写全，比如平板的max-width要补成1024px（常见的平板断点），否则浏览器会直接跳过这个样式块。
• 断点不要重叠：比如移动端用max-width:767px，平板用min-width:768px，这样两种设备的样式范围不会冲突。
• 层叠顺序不能乱：如果是桌面优先，就先写桌面样式，再写平板（比桌面小），最后写移动端（最小）；如果习惯移动优先（先写移动端默认样式），就要按从小到大的顺序写媒体查询（先移动端，再平板，最后桌面）。
• 测试小技巧：调整浏览器窗口大小后记得刷新页面，或者用浏览器的开发者工具（F12）的设备模拟功能来测试不同尺寸的样式。

内容的提问来源于stack exchange，提问作者Asmita Nikhare