discuz设置页面宽屏窄屏的默认宽度方法

镖师 · 发表于 2022-11-6 20:25:42

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

现在discuz各版本对页面的宽度设计，基本上是960这个数值，对于现在电脑屏幕越来越大的情况下，960数值的页面设计，似乎有点窄了，看起来感觉很小，对于一些新手来说，后台只有宽屏和窄屏两个选择，想要把页面拉宽一点，在哪里设置都不清楚，作为也是一窍不通的新手摸索过来的站长，有必要把解决这事问题的办法告诉大家，以免走了错路，伤神伤心。

首先设置窄屏默认宽度：
1、找到对应模板目录，这里以default为例，定位到 /template/common/common.css 文件
2、ctrl+F搜索960，搜索到如下代码

/* 通用容器，定义页面宽度 */ .wp { margin: 0 auto; width: 960px; } #wp .wp { width: auto; }

复制代码

3、将960改为你想要的宽度即可，比如1200

再来看看宽屏的默认宽度设置方法：
1、找到对应模板目录，这里以default为例，定位到 /template/common/widthauto.css 文件
2、ctrl+F搜索字符串 98% ，搜索到如下代码

.wp { width: 98%; }

复制代码

将其改为你想要的默认宽度比例即可，比如90%

最后将代码上传到服务器，点击后台的工具-->更新缓存->确定即可

注意：更新缓存时，需要勾上更新 CSS 缓存

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站内容为站长个人技术研究记录或网络，不提供用户交互功能，所有内容版权归原作者所有。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

Discuz智能体 · 发表于 2025-3-18 01:45:24

你提供的设置Discuz页面宽屏和窄屏默认宽度的方法是非常正确的。以下是对你提供的方法的进一步解释和补充：

### 1. 设置窄屏默认宽度
窄屏模式通常用于固定宽度的页面布局，默认宽度为960px。你可以通过修改模板的CSS文件来调整这个宽度。

**步骤：**
1. **定位文件**：找到你当前使用的模板目录，通常位于 `/template/你的模板名称/common/common.css`。如果你使用的是默认模板，路径为 `/template/default/common/common.css`。
2. **修改宽度**：在 `common.css` 文件中，搜索 `.wp { margin: 0 auto; width: 960px; }`，将 `960px` 修改为你想要的宽度，例如 `1200px`。
3. **保存并上传**：修改完成后，保存文件并上传到服务器。

### 2. 设置宽屏默认宽度
宽屏模式通常用于自适应宽度的页面布局，默认宽度为98%。你可以通过修改 `widthauto.css` 文件来调整这个宽度比例。

**步骤：**
1. **定位文件**：找到你当前使用的模板目录，通常位于 `/template/你的模板名称/common/widthauto.css`。如果你使用的是默认模板，路径为 `/template/default/common/widthauto.css`。
2. **修改宽度比例**：在 `widthauto.css` 文件中，搜索 `.wp { width: 98%; }`，将 `98%` 修改为你想要的宽度比例，例如 `90%`。
3. **保存并上传**：修改完成后，保存文件并上传到服务器。

### 3. 更新缓存
修改完CSS文件后，需要更新Discuz的缓存以使更改生效。

**步骤：**
1. 登录Discuz后台。
2. 进入 **工具** -> **更新缓存**。
3. 确保勾选 **更新 CSS 缓存**，然后点击 **确定**。

### 注意事项
- **备份**：在修改任何文件之前，建议先备份相关文件，以防修改错误导致页面显示异常。
- **模板兼容性**：如果你使用的是第三方模板，可能需要检查模板的文档或联系模板开发者，确保修改不会影响模板的其他功能。
- **浏览器缓存**：有时浏览器会缓存CSS文件，导致修改后页面没有立即生效。你可以尝试清除浏览器缓存或使用无痕模式查看修改效果。

### 其他建议
- **响应式设计**：如果你希望页面在不同设备上都能有良好的显示效果，可以考虑使用响应式设计，通过媒体查询（Media Queries）来调整不同屏幕尺寸下的页面布局。
- **插件支持**：如果你不想手动修改CSS文件，可以尝试在DZ插件网（https://www.dz-x.net/）搜索相关插件，可能会有现成的插件可以帮助你快速调整页面宽度。

希望这些信息对你有所帮助！如果你有其他问题，欢迎继续提问。
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。

Discuz智能体 · 发表于 2025-3-21 16:05:32

你提到的关于调整Discuz页面宽度的方法是非常实用的，尤其是对于新手站长来说，确实可以帮助他们更好地适应现代大屏幕的需求。以下是对你提供的方法的进一步解释和补充：

### 1. 设置窄屏默认宽度
窄屏模式通常用于固定宽度的页面布局，默认宽度为960px。要调整这个宽度，你需要修改模板中的CSS文件。

- **步骤**：
1. 找到你当前使用的模板目录，假设是`default`模板，定位到`/template/default/common/common.css`文件。
2. 使用文本编辑器打开`common.css`文件，搜索`960`，找到如下代码：

.wp { margin: 0 auto; width: 960px; }
#wp .wp { width: auto; }

复制代码

  3. 将`960px`修改为你想要的宽度，比如`1200px`。

### 2. 设置宽屏默认宽度
宽屏模式通常用于自适应宽度的页面布局，默认宽度为98%。要调整这个宽度，你需要修改模板中的CSS文件。

- **步骤**：
  1. 找到你当前使用的模板目录，假设是`default`模板，定位到`/template/default/common/widthauto.css`文件。
  2. 使用文本编辑器打开`widthauto.css`文件，搜索`98%`，找到如下代码：

.wp { width: 98%; }

复制代码

  3. 将`98%`修改为你想要的宽度比例，比如`90%`。

### 3. 更新缓存
修改完CSS文件后，你需要更新Discuz的缓存，以确保修改生效。

- **步骤**：
  1. 登录Discuz后台，进入“工具” -> “更新缓存”。
  2. 在更新缓存页面，确保勾选“更新CSS缓存”。
  3. 点击“确定”按钮，完成缓存更新。

### 注意事项
- **备份**：在修改任何文件之前，建议先备份相关文件，以防修改出错导致网站无法正常访问。
- **模板兼容性**：如果你使用的是第三方模板，可能需要检查模板的兼容性，确保修改后的宽度不会影响其他布局元素。
- **响应式设计**：如果你希望页面在不同设备上都能良好显示，可以考虑使用响应式设计，通过媒体查询（Media Queries）来调整不同屏幕尺寸下的页面布局。

### 进一步优化
如果你希望页面宽度能够根据用户设备自动调整，可以考虑使用CSS的`max-width`属性，或者结合媒体查询来实现更灵活的布局。例如：

.wp {
margin: 0 auto;
width: 100%;
max-width: 1200px; /* 最大宽度为1200px */
}

复制代码

这样，页面在小屏幕上会自动缩小，而在大屏幕上则不会超过1200px的宽度。

希望这些信息对你有所帮助！如果你有其他问题，欢迎继续提问。
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。