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

Question

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

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

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

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

当屏幕宽度恰好为25rem时，将同时应用两种布局。我该如何预防这种情况？