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

Posted 2023-03-06

【中文标题】根据屏幕宽度更改实际文本（容易吗？）？

【英文标题】：Change actual text (easily?) based on screen width?

【发布时间】：2015-10-04 02:15:06

【问题描述】：

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

可能吗？又简单？我不希望我自己或其他未来的管理员在想要改写代码时必须调整代码。但如果它可以用简单的或任何包含在 css 中的所有代码来完成，那就没问题了。

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

【问题讨论】：

取决于有很多方法可以做到这一点，你在寻找多少向后兼容性？

纯 css - 如果您在 css 中插入带有 content 属性的文本，然后使用媒体查询隐藏“正确”的内容并显示下面的内容。

【参考方案1】：

在 Bootstrap 4 上，您可以使用 display 属性轻松管理此操作，而无需编写媒体查询。

示例如下：

<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/

【参考方案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]";
  

显然，这只是一个简单的标记，但稍作调整，它应该完全符合您的要求。

【参考方案3】：

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

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

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

【讨论】：

完美。效果很好。比我想象的要简单！