css - 根据屏幕宽度选择两种布局之一

Question

我在 CSS 中有两种不同的布局。一种适用于移动设备（和其他更窄的屏幕），另一种适用于台式机。布局的宽度取决于屏幕宽度。

/* mobile */
@media (max-width: 25rem) {
    .foo {
        font-size: 1rem;
        color: red;
    }
}

/* desktop */
@media (min-width: 25rem) {
.foo {
        font-size: 2rem;
    }
}

我不想重置“桌面”部分中“移动”部分中设置的内容，因为它们完全不同。

当屏幕宽度正好是 25rem 时，两种布局都会被应用。我怎样才能防止这种情况？

标签： cssmedia-queries