根据屏幕宽度更改实际文本（容易吗？）？

Question

我正在使用响应式设计模板设置现成的购物车。我有一个水平方向的部分具有较大的视口，而垂直方向的部分则具有较小的设备。我想要使用写着 "see to the right for [whatever]"... 的副本，但在较小的设备上，它不是 "to the right" 而是在下面。所以我想让它在视口改变时动态地说 "see below"。

可能吗？简单吗？我不希望我自己或其他未来的管理员在想重写代码时不得不调整一堆代码。但是，如果可以使用 css 中包含的所有代码进行简单或其他任何操作，那很好。

否则我会接受 "no" 如果这是更好的答案。

Answer 1

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

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

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

Answer 2

一种方法是使用伪元素和媒体查询。你可以这样做：

HTML:

<div><!-- empty by design --></div>

CSS:

@media screen and (max-width: 300px) {
  div:before {
    content: "see below for [whatever]";
  }
}

@media screen and (min-width: 301px) {
  div:before {
    content: "see to the right for [whatever]";
  }
}

显然这只是一个简单的标记，但稍加调整就可以完全满足您的要求。

Answer 3

在 Bootstrap 4 上，您可以使用显示属性轻松管理它，而无需编写媒体查询。

示例如下：

<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

这里有更多信息：https://getbootstrap.com/docs/4.0/utilities/display/

根据屏幕宽度更改实际文本（容易吗？）？

Change actual text (easily?) based on screen width?

css

viewport

responsive-design