Html 如何删减从桌面网站版本到平板电脑/手机的内容？

我的桌面站点版本如下所示：

我用@mediaquery制作了手机版，看起来像这样：

在商业学院，我们被教导删减和最小化移动版本的内容，但有趣的是，他们没有告诉我们如何编辑内容

我的问题是如何将桌面版的大标题改为手机版，比如说“我们正在寻找志愿者帮助我们……等等……等等……等等”，手机版只包含两个词——“志愿服务机会”

---

如果有任何回应，我将不胜感激，干杯

有几个选项可以获得您想要的结果

您可以在html中查看移动和桌面版本的内容，但在CSS中使用媒体查询来隐藏和显示设备的正确内容

或者你可以使用类似的东西——这是一个名为responsive content的jquery插件

我还建议大家阅读一下这篇文章-

这与语境有关

响应性设计是称为渐进增强的web开发理念的一部分。接受渐进式增强的网页设计师认为，用户不应该因为没有“合适”的设备或浏览器而错过一次精彩的体验或内容。正如Aaron Gustafson在《Adaptive Web Design:Crafting Rich Experience with Progressive Enhancement》一书中所指出的：“Progressive Enhancement是一种理念，旨在通过让用户无需技术限制地访问内容，为用户提供服务的体验。”

响应性设计就是要适应用户的环境——他们的环境、设备等等。在进行项目规划时，技术沟通者总是考虑环境因素。这是我们的咒语“了解你的听众”的一部分

---

您可以通过使用两个文本版本创建两个元素来更改文本，然后根据屏幕大小通过媒体查询显示和隐藏它们

如果您使用的是引导，则可以使用。如果没有，您可以包括您的自定义css，它也可以这样做

我在下面提供了一个工作示例。运行整个页面并调整屏幕大小，以查看其工作情况

。可见xs内联{
显示：无；
}
/**小屏幕的样式*/
@介质（最大宽度：767px）{
.visible xs inline{
显示：内联！重要；
}
.隐藏的X{
显示：无！重要；
}
}

我们正在寻找志愿者来帮助我们在欧洲绿色选举营！
志愿服务机会

显示该文本的html代码是什么？有几种方法可以改变它。@Yura感谢您的回复！我忘了提到，主文本是由PHP Include函数显示的，该函数包括单独的文章，作为带有和标记的纯文本，仅此而已。但我认为对我来说，使用PHP会变得太复杂。假设我在桌面版上有一个简单的标题，里面有很多字符，我想在手机版上显示标题，就像下面的志愿者机会一样。希望你明白我的意思：）你需要为文本的两个版本创建两个元素。您可以在

元素中创建这两个元素。然后给他们分配类并使用我在回答中解释的css。@Yura谢谢你的帮助，我会马上深入研究！事实上，我刚刚用

更新了我的答案，以符合您的情况。非常感谢您的回复！我不推荐这种做法；这将导致在移动浏览器（以及桌面）中加载大量无用的东西。当我们想要两个不同版本的图像时会发生什么？。。。浏览器将为每个用户加载两个！如果目标只是最小化文本本身，从语义和语言上讲，CSS与此无关。最好考虑实现特定的算法；其中一些不太难管理，而且是免费的……霍尔顿，问题不是关于图像，而是关于显示两个版本的文本。您可以使用javascript来完成，但这可能会造成开销。使用媒体查询是轻量级的，也包括在引导程序中，这使它成为最直接和最简单的管理解决方案之一。如果您的问题与问题有关，请对问题进行评论，或者添加您的答案。@holden Hi，这只是为了对网站进行非常基本的更改。没什么太复杂的。但我知道你的想法。我很好奇你在说什么算法？你是说一个PHP或JavaScript脚本，可以检测移动设备，然后加载不同的内容或其他内容？分享您的见解：）