有条件的中心元素

Question

如何让元素在桌面上左对齐并在移动设备上居中？

Answer 1

这是我的解决方案，根据您的设计，使用媒体查询来检测小于 500 像素或任何尺寸的宽度。

@media(max-width:500px) {} 中编写的 CSS 仅适用于宽度小于 500 像素的设备

请注意，按照给定顺序编写以下 CSS 很重要。如果顺序颠倒，最后一个 CSS 将覆盖媒体查询中编写的 CSS

.mobile-center-desktop-left {
  text-align: left;
}

@media(max-width:500px) {
  .mobile-center-desktop-left {
    text-align: center;
  }
}

<div class="mobile-center-desktop-left">
  <button>ff</button>
  <button>ff</button>
  <button>ff</button>
  <div>