如何让这个WordPress网站更具响应能力，还是更流畅？

我试图让这个WordPress网站更流畅或响应，因此它不会在不同的屏幕分辨率重叠。如何让这个WordPress网站更具响应能力，还是更流畅？

我知道@media属性，但我不确定如何我的主题范围内实施。

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

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

enter image description here

感谢所有帮助任何人都可以提供！

来源

2013-02-17 Jason Weber

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

很多更复杂我很害怕。

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

由于@coletrain提到，您可以使用元标记设置初始视口大小（注意：这不会使您的网站响应，它只是设置您的网站在设备veiwport内的初始规模）。

使您的网站上播放不同的视口好的尺寸，你有几个选择：

使用自适应布局的方法，其中任你挑数量的断点，为您的媒体查询（这些宽度在其中您的网站元素将调整为新的尺寸/布局）。典型地选择断点以瞄准更常见的视口 - 例如ipad肖像/风景+ iphone portait /风景。

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

这种方法正在失去人气，很大程度上是因为它基本上只有针对有限数量的视口尺寸存在缺陷，但对于那些经验较少的人来说，它可能是一个易于访问的低挂水果http://uxdesign.smashingmagazine.com/2012/11/08/ux-design-qa-with-christian-holst/。

响应/流体，这种方法将要求您修改基本上很多，涉及到的布局/结构你的网站风格，并与固有的流体％的值代替刚性像素值。这里

一种非常原始的例子 - 给刚性两个栏布局像你.postwrap & #sidebar你可以改变雇用像流体值：

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

响应强烈建议当正确实现，它“面向日益多样化的移动领域的未来证明。

（这是我会做什么，如果我是你）你正在使用WordPress，这个平台的最强大的特性可以说是一个很容易地通过交换的主题改变你的外观&感觉网站的能力。

随着质量自由响应的WP主题在那里的过多，真的没有借口不有一个良好的设计和移动友好的主题。去谷歌上查询。

此外，至于你的社交图标重叠问题 - 再次利用WP的优势，尝试一些不同的插件，如果你正在寻找一个“1-2-3”的解决方案。

编辑：作为@stepquick提到，阮经Marcottte的自适应网页设计是一个伟大的读取（在我的经验一书除了书籍往往是一个很好的“无绒毛”资源）。另外，如果你想要获得更多的实践，而不是简单地实现一个打包的主题，那么你也可以开始使用一个框架，如基础http://foundation.zurb.com/（这非常棒）来构建你自己的。

来源

2013-02-17 07:24:46 danwild

感谢您花时间阅读我的问题，并提供如此优秀的答案，丹尼尔。不要担心新手关闭这个主题;他们只是试图展示他们的肌肉，因为他们是新的Stack Exchange版主，他们认为他们正在做一些事情。这个问题是太过本地化的FAR。但我明白他们在做什么...从newb的角度来看。无论如何，这听起来相当吓人，但必要的......是的，灵活性3是我开始使用的，尽管我已经大大地改变了它......再次感谢您花时间，丹尼尔！ – 2013-02-17 15:37:02

关于适应性和反应性之间的区别的好处。但是你不认为2的组合是最好的吗？因为在某个屏幕宽度以下，2列可能变得非常狭窄＆高难以阅读，以您的CSS示例。 – yitwail 2014-04-10 23:57:09

啊当然是！我想我没有明确提及这一点，但混合方法绝对是我认为的方法。这正是祖尔斯基金会所提供的功能，因为我之前已经开始拼写）;） – danwild 2014-04-11 10:54:02

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

这对您的header.php文件上面添加head标签

<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更多地解释它。

来源

2013-02-17 06:27:04 coletrain

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

我会建议使用网站分析，如谷歌自己的网站分析研究你的流量。它给你的信息，如浏览器，操作系统，技术，位置等

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

这是一本好书，作者是一个真正伟大的家伙。

至于这么快。有没有快速的方式来做出正确的方式进行响应式设计。这是关于针对适当需求的响应。

来源

2013-02-17 07:21:20 stepquick

如何让这个WordPress网站更具响应能力，还是更流畅？

回答

相关问题