根据屏幕宽度更改实际文本(轻松？)？

Question

我正在建立一个带有响应式设计模板的现成购物车.我有一个水平定向的部分,具有较大的视口和垂直定向的较小的设备.我想使用"向右边看[无论如何]"的副本......但是在较小的设备上,它不是"向右"而是在下面.因此,当视口发生变化时,我想让它动态地说"见下面".

可能？简单吗？如果他们想要改写它,我不希望自己或其他未来的管理员必须调整一堆代码.但是,如果它可以用简单的或者css中包含的所有代码完成,那么这很好.

否则我会接受"不",如果这是更好的答案.

Answer 1

您可以使用媒体查询和以下方法执行此操作.

声明具有所需数据的两个跨度,一个用于大屏幕,另一个用于较小屏幕:

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

在css中,lg-view默认显示范围并隐藏另一个:

.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;
    }
}