AI摘要
本文介绍了如何为Typecho Handsome主题v10.1.0定制响应式宽度，以适应不同屏幕尺寸。通过添加CSS代码到Typecho的自定义CSS中，可以调整页面宽度。文章提供了详细的CSS代码示例，并解释了如何自定义宽度，以及一些重要的规则和注意事项。
前言
本教程介绍如何为 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%; /* ← 修改这里，与上面保持一致 */
}
}