在不同尺寸的屏幕上更改文本

Question

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

因此，当您在 phone 上打开网站时，它会显示一个文本，例如：你好，当您在 laptop/pc 上打开该网站时，它会显示不同的文本，例如：祝您今天愉快去 images/buttons

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

Answer 1

我给出了两种解决方案。

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

这是一种相当简单和常用的显示内容的方式，具体取决于屏幕大小。正如我在上面的评论中所说，您可以通过在容器中设置两个文本来对 display: none / display: block 规则进行操作。

此外，通过使用伪class :nth-child():

关闭 移动设备 的文本可见性

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

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

@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 解决方案：伪class :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>

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

Answer 3

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

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

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

在不同尺寸的屏幕上更改文本

change text on different size screen

html

css

media-queries

我给出了两种解决方案。

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

#2 解决方案：伪class :after