Question

我的桌面版网站版本如下： Desktop Version Screenshot

我使用@mediaquery创建了移动版本，看起来像这样： Mobile Version Screenshot

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

我的问题是我如何能够改变例如桌面版中的大胖标题＆＃34;我们正在寻找志愿者来帮助我们...... bla..bla..bla＆＃34;移动版只包含2个单词 - ＆＃34;志愿服务机会＆＃34; ？

我会非常感激任何回应，欢呼！

Answer 1

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

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

或者你可以看看使用这样的东西 - http://stephanfowler.com/responsive-content/这是一个名为responsive-content的jquery插件。

我还建议阅读本文 - http://summit.stc.org/responsive/summit2014.htm#!Documents/informationeverywhereflexiblecontentwithresponsivedesign.htm

关于背景的回应

响应式设计是名为Progressive Enhancement的Web开发理念的一部分。采用渐进增强功能的网页设计师认为，用户不应错过良好的体验或内容，因为他们没有“正确的”设备或浏览器。正如Aaron Gustafson在自适应网页设计中指出的那样：通过渐进增强来创造丰富的体验：“渐进增强是一种旨在通过为用户提供访问内容而无需技术限制来为用户提供体验的理念。”

响应式设计完全是为了适应用户的环境 - 他们的环境，设备等。技术传播者在进行项目规划时始终考虑背景。这是我们口头禅“了解你的观众”的一个组成部分。

Answer 2

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

如果您使用的是Bootstrap，则可以使用http://localhost:8000/blog/post/?tags=[tag1,tag2,tag3]。如果没有，您可以包含同样的自定义css。

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

＆＃13;

.visible-xs-inline {
  display: none;
}

/** Styles for small screen */
@media (max-width: 767px){
  .visible-xs-inline {
      display: inline!important;
  }
  .hidden-xs {
    display: none!important;
  }
}

＆＃13;

<h2>
  <span class="hidden-xs">
    We are looking for volunteers to help us during our European Green Election campain!
  </span>  
  <span class="visible-xs-inline">
    Volunteering Opportunities
  </span>
</h2>

＆＃13;

如何修剪从桌面版网站到平板电脑/移动版的内容？

2 个答案: