我怎样才能使这个WordPress网站更具响应性或流动性？

我正试图使这个WordPress网站更流畅或更具响应性，这样它就不会在不同的屏幕分辨率下重叠

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

是否有一个快速的“1-2-3”来解决这个问题，或者说它更复杂？我正在工作的网站是，我不确定它是否反应灵敏或流畅，但根据这个截图，我认为它不是

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

---

谢谢任何人能提供的帮助

要使任何网站或wordpress网站具有响应性，请使用css媒体查询

将其添加到head标记上方的header.php文件中

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

}

---

然后你的网站现在是响应当然你将不得不风格你的网站取决于每个大小，但以上应该开始你的网站。还可以看看这篇文章，它解释了更多

要使任何网站或wordpress网站具有响应性，请使用css媒体查询

将其添加到head标记上方的header.php文件中

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

}

---

然后你的网站现在是响应当然你将不得不风格你的网站取决于每个大小，但以上应该开始你的网站。还可以看看这篇文章，它解释了更多

这是一个非常棘手的问题。你想问的第一个问题是你发现你的网站有使用移动设备的流量吗

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

然后你真的必须决定它是否值得。有几种工具，我通常推荐：

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

---

至于这么快做。没有快速的方法可以正确地进行响应性设计。这是关于针对适当需求的响应

这是一个非常棘手的问题。你想问的第一个问题是你发现你的网站有使用移动设备的流量吗

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

然后你真的必须决定它是否值得。有几种工具，我通常推荐：

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

至于这么快做。没有快速的方法可以正确地进行响应性设计。这是关于针对适当需求的响应

是否有一个快速的“1-2-3”来解决这个问题，或者说它更复杂

恐怕要复杂得多

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

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

要使您的网站在不同的视口大小上运行良好，您有几个选项：

• 使用自适应布局方法，为媒体查询选择任意数量的断点（网站元素将调整为新维度/布局的宽度）。断点通常是针对更常见的视口选择的，例如ipad纵向/横向+iphone portait/横向

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

这种方法越来越不受欢迎，主要是因为它只针对有限数量的视口大小存在根本性的缺陷，但对于那些经验不足的人来说，它可能是一个容易接近的低挂果实

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

这里有一个非常粗糙的示例-给定一个像

.postwrap

和

#边栏

这样的刚性两列布局，您可以更改为使用流体值，如：

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

强烈推荐Responsive，因为如果正确实施，它将为日益多样化的移动环境提供“未来证明”

• （如果我是你，我会这么做）你在使用WordPress，可以说这个平台最强大的特点之一就是能够通过交换主题轻松改变你网站的外观和感觉

有过多的免费响应WP主题，真的没有理由不拥有一个设计良好、移动友好的主题。谷歌

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

编辑：正如@stepquick所提到的，伊桑·马科特（Ethan Marcottte）的响应式网页设计是一本很好的读物（以我的经验，一本书之外的书往往是一个很好的“无绒毛”资源）。此外，如果你想获得更多的手，而不是简单地实现一个打包的主题，你也可以开始使用一个框架，如基金会（这是非常棒的）来构建你自己的。 是否有一个快速的“1-2-3”来解决这个问题，或者说它更复杂

恐怕要复杂得多

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

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

要使您的网站在不同的视口大小上运行良好，您有几个选项：

• 使用自适应布局方法，为媒体查询选择任意数量的断点（网站元素将调整为新di的宽度）