css - 根据屏幕宽度更改实际文本(容易吗？)？

Question

我正在使用响应式设计模板设置现成的购物车。我有一个水平方向的部分具有较大的视口(viewport)，而垂直方向的部分则具有较小的设备。我想使用写着“向右看[whatever]”的文案......但在较小的设备上，它不是“向右”而是在下面。所以我想让它在视口(viewport)改变时动态地说“见下文”。

可能吗？简单吗？我不希望我自己或其他 future 的管理员在想重写代码时不得不调整一堆代码。但是，如果它可以通过一个简单的或任何包含在 css 中的所有代码来完成，那就没问题了。

否则，如果这是更好的答案，我会接受“否”。

Answer 1

您可以使用媒体查询和以下方法来做到这一点。

声明两个具有所需数据的 span，一个用于大屏幕，另一个用于小屏幕:

<span class="lg-view">See to the right</span>
<span class="sm-view">See below</span>

在css中，默认显示lg-view span，隐藏另一个:

.lg-view{
   display:inline-block;
}

.sm-view{
   display:none;
}

然后在 media query 中，反转上面的样式:

@media screen and (max-width: 500px) {
    .lg-view{
       display:none;
    }

    .sm-view{
       display:inline-block;
    }
}