调整大小时更改文本

Question

我想知道根据设备是否可以使用不同的文本。

例如在780px中我的<p>将显示＆＃34; hello world＆＃34;并且仅在320＆＃34;你好＆＃34;。

谢谢。 的问候，

Answer 1

是。例如，您可以在<span>中包装您不想看到的文本，并根据视口宽度隐藏它们。

<p>Hello <span class="hide">world!</span></p>

@media screen and (max-width: 320px) {
  p span.hide{
    display: none;
  }
}

@media screen and (min-width: 321px) {
  p span.hide{
    display: inline;
  }
}

Answer 2

这绝对有可能。一个简单的方法是：

var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;

if(width > 1028){
  //display some text
} else if(width > 780) {
  //display other text
}

等

Answer 3

您可以在不同的div上分隔两个文本。

接下来使用css @media display或根据设备不显示此div。