Question

我正在 wordpress 建立一个网站，所以我选择了响应主题，＆安培;通过添加css .container { width: 1340px; }来增加页面宽度
现在我的网站变得反应迟钝，没有任何解决方案吗？由于
网站 - http://cardmart.tk

Answer 1

您的主题首先是移动设备，您有3个断点：

/* here the mobile */

@media all and (min-width: 768px) {
 /* tablet */
}

@media all and (min-width: 992px) {
 /* laptop */
}

@media all and (min-width: 1200px) {
 /* bigger screens */
}

这是您主题中定义的规则，最好的解决方案是修改所有这些规则以满足您的需求，但您必须考虑＆＃39; .container＆＃39; class被分配给几个元素。

快速解决方法是以这种方式修改您的规则：

.container {
  /* width: 1340px; */
  width: 100%;
}

Answer 2

添加固定宽度肯定不会使您的网站响应。还有更多内容。

首先，删除这种破坏网站响应能力的风格：

.container {
    width: 1340px;
}

它破坏响应性的原因是您将规则应用于.container并且未将其附加到媒体查询，该查询设置其桌面屏幕大小的宽度。因此，如果您希望您的网站在桌面屏幕上的宽度为1340px，那么您可以像这样添加它：

@media (min-width: 1370px) {
    .container {
        width: 1340px;
    }
}

注意min-width值可以修改，但它假设每边有15px填充，所以它有意义（1340 + 15 + 15 = 1370）。

另一个重要问题是你放置CSS规则。它应该按照有意义的顺序级联 - 从一般规则到特定规则，并且因为您的规则放在底部，它覆盖了所有屏幕大小的宽度并使其无响应。

应该添加什么媒体规则以使网站响应？

2 个答案: