Jquery 如何根据视口的宽度更改给定段落的内容（即动态内容替换）

调整浏览器宽度时，如何更改给定段落的内容？例如，在我网站的移动版上，我希望带有class“.main lead”的段落包含以下内容：

<p class="main-lead">Some content goes here.</br>And some content goes here</p>

这似乎是可行的，但如果用户决定将屏幕调整回移动视图，则内容将与平板电脑和桌面版本相同，而不是移动版本

因此，我希望在前后调整浏览器窗口的大小时，这一段的内容能够动态变化

如有任何建议，将不胜感激。谢谢。

var$window=$（window），
$mainLead=$（“.mainLead”）；//缓存主要元素以供重用
$window.resize（函数（）{
如果（$window.width（）>768）{
//如果屏幕宽度大于768px
$mainLead.html（$mainLead.data（'contentNotMobile'））；
}否则{
//如果屏幕宽度不超过768px
$mainLead.html（$mainLead.data（'contentMobile'））；
}
});
$window.trigger（'resize'）；//即使在加载时也启动resize以捕获页面的初始状态

有些内容放在这里。
有些内容放在这里

var$window=$（window），
$mainLead=$（“.mainLead”）；//缓存主要元素以供重用
$window.resize（函数（）{
如果（$window.width（）>768）{
//如果屏幕宽度大于768px
$mainLead.html（$mainLead.data（'contentNotMobile'））；
}否则{
//如果屏幕宽度不超过768px
$mainLead.html（$mainLead.data（'contentMobile'））；
}
});
$window.trigger（'resize'）；//即使在加载时也启动resize以捕获页面的初始状态

有些内容放在这里。
有些内容放在这里

您也可以尝试使用css代码

<style>
.mobile { display:none; }
@media screen and (max-width:768px) { 
.desktop { display:none; }
.mobile { display:block; }
 } 
</style>
<p class="main-lead">
    <span class="desktop">Some content goes here.</br>And some content goes here</span>
    <span class="mobile">Previous content has been replaced.</span>
</p>

.mobile{display:none；}
@媒体屏幕和（最大宽度：768px）{
.desktop{显示：无；}
.mobile{display:block；}
} 

有些内容放在这里。
有些内容放在这里
以前的内容已被替换。

您也可以尝试使用css代码

<style>
.mobile { display:none; }
@media screen and (max-width:768px) { 
.desktop { display:none; }
.mobile { display:block; }
 } 
</style>
<p class="main-lead">
    <span class="desktop">Some content goes here.</br>And some content goes here</span>
    <span class="mobile">Previous content has been replaced.</span>
</p>

.mobile{display:none；}
@媒体屏幕和（最大宽度：768px）{
.desktop{显示：无；}
.mobile{display:block；}
} 

有些内容放在这里。
有些内容放在这里
以前的内容已被替换。

我认为只要可能，这比js解决方案更可取。啊，为什么我没有考虑过在引导隐藏的xs隐藏的sm隐藏的md等类中使用这个想法呢。谢谢你的建议。好吧，如果你使用的是引导框架，这是一个更好的主意。我认为这比js解决方案更可取。啊，为什么我没有考虑过在引导隐藏的xs隐藏的sm隐藏的md等类中使用这个主意呢。谢谢你的建议。好吧，如果你使用的是引导框架，那就更好了。

<style>
.mobile { display:none; }
@media screen and (max-width:768px) { 
.desktop { display:none; }
.mobile { display:block; }
 } 
</style>
<p class="main-lead">
    <span class="desktop">Some content goes here.</br>And some content goes here</span>
    <span class="mobile">Previous content has been replaced.</span>
</p>