Question

我正在设置一个带有响应式设计模板的现成购物车。我有一个水平定向的部分，具有较大的视口和垂直定向的较小的设备。我希望使用复制文件说＆＃34;在右边看到[无论如何]＆＃34; ...但是在较小的设备上，它不是＆＃34;正确的＆＃34;而是在下面。所以我想让它动态地说'＆＃34;见下面＆＃34;当视口改变时。

可能？简单吗？我不想要一堆乱七八糟的代码，如果他们想要重新编写代码，我或其他未来的管理员将不得不调整这些代码。但是，如果可以使用css中包含的所有代码的简单或其他内容来完成，那么这很好。

否则我会接受＆＃34; no＆＃34;如果这是更好的答案。

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

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上，您可以使用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/

根据屏幕宽度更改实际文本（轻松？）？

3 个答案: