如何根据桌面端、移动端视图设置对应CSS属性实现响应式适配

你当前的写法没有做视口尺寸的条件判断，.content的margin-left:70px是全局生效的，即使在移动端也会被应用，而你写的.content-collapsed类如果没有在移动端正确挂载到元素上、或者选择器优先级不够，就无法覆盖原有margin值。

优先用CSS媒体查询做响应式适配，不需要额外通过JS切换类名，稳定性最高：

• 先根据你的设计稿确定移动端和桌面端的分界断点，行业常用的移动端断点为视口宽度≤768px
• 把桌面端样式作为默认样式，在媒体查询内写移动端的覆盖样式，注意媒体查询规则要放在同选择器默认样式的后面，避免优先级问题

参考代码：

.body-container {
  padding-left: 0px;
  padding-right: 0px;
  max-width: 1350px;
}

/* 桌面端默认生效 */
.content {
  margin-left: 70px;
}

/* 视口宽度≤768px（移动端）时覆盖margin值 */
@media screen and (max-width: 768px) {
  .content {
    margin-left: 0px;
  }
}

如果你是要做侧边栏折叠/展开的交互、需要通过挂载类名控制margin，需要提高折叠类的选择器优先级，避免被基础类样式覆盖：

.content {
  margin-left: 70px;
}
/* 组合选择器优先级高于单类选择器，保证样式生效 */
.content.content-collapsed {
  margin-left: 0px;
}

如果写完样式还是不生效，可以打开浏览器开发者工具，选中目标div元素，在「计算样式（Computed）」面板里找到margin-left属性，查看当前生效的规则来源，排查是否有其他更高优先级的样式冲突。

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