在不同大小的屏幕上更改文本答案

【问题标题】：change text on different size screen在不同大小的屏幕上更改文本
【发布时间】：2021-01-26 04:07:41
【问题描述】：

所以我正在使用移动优先方法制作网站。现在我的问题是：如何更改文本/图像等（不是字体大小）？

因此，当您在手机上打开网站时，它会显示一条文字，例如：你好，而当您在笔记本电脑/PC 上时，它会显示不同的文字，例如：祝您有美好的一天，图片/按钮也是如此

我知道@media 屏幕和（最小宽度），但是如何在不需要时将其添加到 html 而不显示文本？

【问题讨论】：

您可以使用规则伪类content: '' :before 或 :after。或者，创建两个默认文本，并根据设备分配display: none。

标签： html css media-queries

【解决方案1】：

我给出了两种解决方案。

#1 解决方案：显示：无/显示：块

这是一种相当简单且常用的显示内容的方式，具体取决于屏幕尺寸。而且正如我上面在cmets中所说，你可以通过在容器中设置两个文本来操作display: none/display: block规则。

另外，通过关闭移动设备的文本可见性，使用伪类:nth-child()：

.container p:nth-child(2) {
  display: none;
}

而from to，媒体查询会为每个文本转规则：

@media (max-width: 767px) {...}

.container p {
  font-size: 32px;
  color: green;
}

.container p:nth-child(2) {
  display: none;
}

@media (max-width: 767px) {
  .container p:nth-child(1) {
    display: none;
  }
  .container p:nth-child(2) {
    display: block;
  }
}

<div class="container">
  <p>This is notebook</p>
  <p>This is mobile</p>
</div>

#2 解决方案：伪类:after

这个解决方案的代码更少，因为不需要在标签中指定文本。在这种情况下，文本作为content: '' 参数传递。

.container p {
  font-size: 32px;
  color: green;
}

.container p:after {
  content: 'This is notebook';
}

@media (max-width: 767px) {
  .container p:after {
    content: 'This is mobile';
  }
}

<div class="container">
  <p></p>
</div>

【讨论】：

@ptrique，我给了你第二个解决方案。查看第二个 sn-p。总是乐于提供帮助。

【解决方案2】：

只需使用 JavaScript。例如，如果您为移动用户提供此功能：

<div class="mobile"><p>Hey, I'm on mobile!</p></div>

这适用于 PC 用户：

<div class="computer"><p>Hey, I'm on PC!</p></div>

那么你可以这样：

<script> 
const mobile = document.querySelector(".mobile"),
pc = document.querySelector(".computer"),
media = window.matchMedia("(max-width: 1000px)")

  if (media.matches) {
mobile.style.display = "none"
pc.style.display = "block"
} else {
pc.style.display = "none"
mobile.style.display = "block" 
}
</script>

【讨论】：

【解决方案3】：

您可以使用@media only screen and (hover: none)。这是一个媒体查询，可以检测具有悬停能力的设备。因此，您可以先为移动设备编写原始代码，然后为不具备悬停功能的设备（如台式机）添加媒体查询。它不需要指定屏幕宽度或类似的东西，因为您无法预测每个屏幕尺寸。它会针对每种屏幕尺寸自动检测是否有悬停的设备
例：

@media only screen and (hover: none){
    .mystyle{
    // your style here 
    color: red
    }
    }

我认为这是一种无需复制代码的好方法。

【讨论】：