如何使这个WordPress网站更具响应性或流畅性？

Question

我正在尝试使这个WordPress网站更流畅或更敏感，因此它不会在不同的屏幕分辨率中重叠。

我知道@media属性，但我不确定如何在我的主题中实现它。

对此有一个快速的“1-2-3”，还是更复杂？我正在研究的网站是We Have Issues，我不确定它是否响应或流畅，但基于此屏幕截图，我认为不是。

社交图标和反馈不应与文本重叠。

感谢任何人提供的任何帮助！

Answer 1

使任何网站或wordpress网站响应使用css媒体查询。

将此添加到head标签上方的header.php文件

<meta name="viewport" content="width=device-width, initial-scale=1.0">

然后在您的css文件中添加媒体查询

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
 body {
  background: #000;
 }

}

然后您的网站现在响应，当然您必须根据每个尺寸设置您的网站样式，但上面应该开始。另请查看此post，其中详细说明了这一点。

Answer 2

这是一个非常棘手的主题。您想问的第一个问题是，您是否发现您的网站拥有使用移动设备的流量？

我建议您使用网络分析来研究您的流量，例如谷歌自己的网络分析。它为您提供浏览器，操作系统，技术，位置等信息。

然后你真的必须决定它是否值得。有几种工具，我通常建议：http://www.abookapart.com/products/responsive-web-design

这是一本好书，作者是一个非常好的人。

至于快速做这件事。没有快速的方法以正确的方式进行响应式设计。它是针对适当需求的响应性。

Answer 3

  

对此有一个快速的“1-2-3”，还是更复杂？

很多更复杂，我害怕。

您正在运行的主题“灵活性3”不具有适应性或响应性。

正如@coletrain所提到的，您可以使用元标记设置初始视口大小（注意：这不会使您的网站响应，它只是在设备veiwport中设置您网站的初始比例）。

为了让您的网站在不同的视口尺寸上发挥出色，您可以选择以下几种方法：

• 使用自适应布局方法，您可以为媒体查询选择任意数量的断点（网站元素将调整为新维度/布局的宽度）。通常选择断点来定位更常见的视口 - 例如ipad肖像/风景+ iphone肖像/风景。

在每个断点处，您必须为站点上需要缩小的所有元素指定新维度（例如，减小#wrap div的宽度）。

这种方法正在失去人气，主要是因为它仅仅针对有限数量的视口大小存在根本缺陷，但对于那些经验较少的人来说，它可能是一个可接受的低挂果http://uxdesign.smashingmagazine.com/2012/11/08/ux-design-qa-with-christian-holst/。

• 响应/流畅，此方法需要您基本上修改与布局/结构相关的许多网站样式，并用固有的流量％值替换刚性px值。

这里有一个非常粗略的例子 - 给出了像.postwrap＆amp; #sidebar您可以更改为使用流体值，例如：

.postwrap {
width: 60%;
}
#sidebar {
 width: 35%;
}

强烈建议您采取相应的响应方式，因为正确实施后，它将成为日益变化的移动领域的“未来证明”。

• （如果我是你，我会这样做）你正在使用WordPress，可以说这个平台最强大的特征之一就是能够轻松改变Look＆amp; amp;通过交换主题来感受你的网站。

有大量优质的免费响应WP主题，没有理由没有一个精心设计和移动友好的主题。谷歌吧。

另外，至于你的社交图标重叠问题 - 再次使用WP的强大功能，如果你正在寻找“1-2-3”解决方案，请尝试一些不同的插件。

编辑：正如@stepquick所提到的，Ethan Marcottte的响应式网页设计是一本很棒的读物（根据我的经验，A Book Apart书籍往往是一个很好的“没有绒毛”的资源）。另外，如果你想要更多地掌握而不仅仅是实现一个打包的主题，你也可以先使用像http://foundation.zurb.com/这样的框架（非常棒）来构建你自己的框架。