Html 更改不同大小屏幕上的文本

所以我用移动第一的方法制作了一个网站。现在我的问题是：如何更改文本/图像等（而不是字体大小）

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

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

我给出了两种解决方案。 #1解决方案：显示：无/显示：块 这是一种非常简单和常见的显示内容的方法，具体取决于屏幕大小。正如我在上面的评论中所说，您可以通过在容器中设置两个文本来操作

display:none

/

display:block

规则

另外，通过使用伪类

：nth-child（）

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

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

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

.container p{
字体大小：32px；
颜色：绿色；
}
.容器p:第n个子容器（2）{
显示：无；
}
@介质（最大宽度：767px）{
.容器p:第n个子容器（1）{
显示：无；
}
.容器p:第n个子容器（2）{
显示：块；
}
}

这是笔记本

这是手机

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

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

嘿，我在用手机

这是为个人电脑用户准备的：

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

const mobile=document.querySelector（“.mobile”），
pc=document.querySelector（“.computer”），
媒体=窗口。匹配媒体（“最大宽度：1000px”）
如果（媒体匹配）{
mobile.style.display=“无”
pc.style.display=“块”
}否则{
pc.style.display=“无”
mobile.style.display=“块”
}

您可以使用

@仅媒体屏幕和（悬停：无）

。这是一个媒体查询，用于检测具有悬停功能的设备。因此，您可以先为移动设备编写原始代码，然后为没有悬停功能的设备（如台式机）添加媒体查询。它不需要指定屏幕宽度或类似的东西，因为您无法预测每个屏幕大小。对于每个屏幕大小，它都会自动检测设备是否悬停
Exmp：

---

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

您可以使用规则pseudo class

content:“

：before或：after”。或者，创建两个默认文本，根据设备的不同，指定

显示：none

@ptrique，我给了您第二个解决方案。查看第二个代码段。总是很乐意帮忙。

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

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