如何基于屏幕尺寸取消CSS桌面端样式实现响应式布局？

下面是几种实用的解决方法，根据你的项目场景选择即可：

1. 媒体查询重置样式 #

这是最直接的方式：先写桌面端的目标样式，再通过媒体查询针对移动端屏幕尺寸，把不需要的属性重置为浏览器默认值。

示例代码：

/* 桌面端样式 */
.target-element {
  margin-left: 20px;
  width: 300px;
  height: 200px;
  position: absolute;
}

/* 针对屏幕宽度≤768px的移动端重置 */
@media (max-width: 768px) {
  .target-element {
    margin-left: initial; /* 重置为浏览器默认值 */
    width: auto;
    height: auto;
    position: static; /* absolute的默认定位是static */
  }
}

你可以根据实际设计调整断点（比如max-width: 480px针对小屏手机），属性值也可以用unset（主流浏览器都支持），效果和initial类似。

2. 使用CSS变量统一管理 #

如果你的项目有多处需要复用这些样式，用CSS变量会更便于维护：

/* 定义全局变量，默认是桌面端值 */
:root {
  --elem-margin-left: 20px;
  --elem-width: 300px;
  --elem-height: 200px;
  --elem-position: absolute;
}

.target-element {
  margin-left: var(--elem-margin-left);
  width: var(--elem-width);
  height: var(--elem-height);
  position: var(--elem-position);
}

/* 移动端覆盖变量值 */
@media (max-width: 768px) {
  :root {
    --elem-margin-left: initial;
    --elem-width: auto;
    --elem-height: auto;
    --elem-position: static;
  }
}

后续要调整样式时，只需要修改变量值即可，不用逐个修改选择器下的属性。

3. 移动端优先写法（推荐） #

换个思路：先写移动端的默认样式（不包含桌面端的那些属性），再通过媒体查询给桌面端添加需要的样式。这样完全不需要重置，逻辑更清晰，也更符合现在移动端优先的开发趋势。

示例代码：

/* 移动端默认样式 */
.target-element {
  /* 这里写移动端需要的样式，比如padding、color等 */
}

/* 屏幕宽度≥769px时，添加桌面端专属样式 */
@media (min-width: 769px) {
  .target-element {
    margin-left: 20px;
    width: 300px;
    height: 200px;
    position: absolute;
  }
}

这种方式加载时会先渲染移动端样式，性能更优，也减少了样式冲突的概率。

注意事项 #

• 断点选择：不要硬套768px，要根据你的设计稿和目标设备调整，比如参考常见手机、平板的屏幕宽度。
• 重置值选择：如果需要兼容旧浏览器（比如IE），initial和unset可能不生效，这时候可以用具体的默认值，比如margin-left: 0;、width: 100%;等，确保符合设计需求。

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