前言

本教程介绍如何为 Typecho Handsome 主题 v10.1.0 定制响应式宽度，使博客在各种屏幕尺寸下都能获得最佳显示效果。

CSS 代码

将以下 CSS 代码添加到 Typecho 的自定义 CSS 中：

@media (min-width: 1200px) {
.app.container {
    width: 90%;
}
.app.container .app-aside {
    max-width: 90%;
}
/* 适用于所有宽屏尺寸的头部宽度修正 (Handsome v10.1.0) */
.app.container .app-header {
    max-width: 100%;
}
}

@media (min-width: 1700px) {
.app.container {
    width: 85%;
}
.app.container .app-aside {
    max-width: 85%;
}
}

@media (min-width: 2048px) {
.app.container {
    width: 80%;
    max-width: 1800px;
}
.app.container .app-aside {
    max-width: 80%;
}
}

如何自定义宽度

若要调整页面宽度，只需在上述 CSS 代码中找到对应屏幕尺寸的媒体查询块 (@media ...)，然后修改 .app.container 和 .app.container.app-aside 的百分比。

重要规则:

.app.container 的 width 和 .app.container .app-aside 的 max-width 的百分比必须保持一致。
注意不要修改 .app.container .app-header 的 max-width: 100% ，这是确保头部正确对齐的。
示例：将 1700px 以上屏幕的宽度改为 90%

/* 修改前 */
@media (min-width: 1700px) {
.app.container {
    width: 85%;
}
.app.container .app-aside {
    max-width: 85%;
}
}

/* 修改后 */
@media (min-width: 1700px) {
.app.container {
    width: 90%; /* ← 修改这里 */
}
.app.container .app-aside {
    max-width: 90%; /* ← 修改这里，与上面保持一致 */
}
}

参考文章 https://www.52txr.cn/2022/cssmargin.html

End

本文标题：Handsome 主题修改页面整体宽度 - V10.1

本文链接：https://www.ciyol.cn/archives/5.html

除非另有说明，本作品遵循CC 4.0 BY-SA 版权协议。

声明：转载请注明文章来源。

最后修改：2025 年 08 月 20 日
© 转载自他站
如果觉得我的文章对你有用，请随意赞赏