二十个子主题 - 修改主题宽度（940px 到 1000px）

Posted 2023-03-06

【中文标题】二十个子主题 - 修改主题宽度（940px 到 1000px）

【英文标题】：Twenty Ten Child Theme - Modify Theme Width (940px to 1000px)

【发布时间】：2012-12-27 09:29:54

【问题描述】：

我最初在 WordPress Answers 上发布了这个，但被告知这是一个 CSS 问题，应该在这里发布。

我在我的网络服务器上安装了最新版本的 WordPress (3.5) 和二十个主题 (1.5)。我没有修改任何设置，一切都是默认的。我希望我的子主题做的就是将主题宽度从 940 像素更改为 1000 像素。我的子主题中唯一的文件是 style.css，我更改的唯一值是宽度。

宽度调整在所有桌面浏览器上都可以正常工作，但在 iPhone (ios 6) 和 iPad (iOS 6) 上，主题加载时带有水平滚动条，并且无法完全缩小。水平滚动条问题只影响主页而不影响示例页面。问题仅限于垂直模式。

下面是截图和我的 style.css 代码：

我使用以下代码安装默认 WordPress 的网站是：www.w242.com

style.css：

/*
Theme Name: w242
Description: Child theme for the twentyten theme 
Author: w242
Template: twentyten
*/

@import url("../twentyten/style.css");

#access .menu-header,
div.menu,
#colophon,
#branding,
#main,
#wrapper 
    margin: 0 auto;
    width: 1000px; /* CHANGED 940px ---TO---> 1000px */


#access 
    background: #000;
    display: block;
    float: left;
    margin: 0 auto;
    width: 1000px; /* CHANGED 940px ---TO---> 1000px */

【参考方案1】：

首先，在 style.css 第 173 行，您有一个属性分配给 div.#wrapper 的 padding: 0px 20px;，它将把对象的总宽度扩展到 1040px。由于您将#wrapper 子元素的宽度更改为1000px，padding 样式属性在其内部的每一侧再增加20px，将其大小扩展到1040px。这就是为什么你会得到悬垂。

其次，这些屏幕截图来自移动设备。您在移动或桌面格式化方面需要帮助吗？如果是移动的，最简单的方法是找到一个移动主题插件并将其修改为子主题，而不是乱用 2010 模板。此外，您可能希望避免使用像素作为单位并切换到 % 或 em，或者设置 min-width 和 max-width 而不仅仅是宽度。

这是一篇带有一些示例的文章。 http://www.cssjuice.com/css-liquid-layout-design/

提示要更改该标题图像的大小，您需要查看“functions.php”文件。

【讨论】：

我知道填充，无论包装器设置为 940 像素还是 1000 像素。我的问题是宽度调整在所有桌面浏览器上都可以正常工作，但在 iPhone (iOS 6) 和 iPad (iOS 6) 上，主题会通过水平滚动条加载，并且无法一直放大但主题工作正常在 940 像素。我不想也不应该需要任何移动插件来进行如此简单的调整。

提示更改该标题图像的大小，您需要查看“functions.php”文件。 --- 我知道，我故意让事情变得简单以尝试解决问题。

听起来iOS浏览器在确定窗口宽度时不会考虑填充大小。谷歌搜索了这个问题，并得到了一些关于类似问题的回击。检查您的溢出设置。如果页面不会滚动，它可能只是呈现到父元素的尺寸并隐藏所有子元素。

我对此表示怀疑。示例页面 - 1000 像素（参见上面的屏幕截图）在 iOS 浏览器中正确加载，因此在确定窗口宽度时必须考虑填充大小。

您是否尝试过使用 Adob​​e Edge Inspect (html.adobe.com/edge/inspect)（一次对一台设备免费）来查看您的 iOS6 设备中应用的样式？可能还值得查看页面的来源，以查看标题中是否存在任何视口元标记。现代二十一十二也可能是响应式基本主题的更好选择。