解決hexo-mellow主題手機端內容溢出問題

歡迎訪問我的個人博客

前言

自從用mellow主題以來，我就一直記掛着它的巨大缺陷——手機端屏幕溢出——這可不行！

由於用mellow主題的人很少，網上鮮有對它的討論，開發者的qq也被遺棄，我只能自力更生，艱苦奮鬥了。

找到文件路徑

屏幕溢出的問題，顯然是由顯示寬度或者頁面邊距的問題造成的。這些應該是CSS文件的內容。

於是，我打開了.\themes\mellow\source\css\_partial

W T F

沒事，一個一個找過去就行了

我們冷靜分析，大概就是在page.less layout.less之間了

點開它們，成功近在眼前

修改頁面邊距

打開page.less，找到下面這一段：

@media screen and(max-width: 480px) {
    .page-content {
        margin-left: -16px;//左邊距
        margin-right: -16px;//右邊距
        .column {
            display: block;
        }
        .column-2>*,
        .column-3>*{
            width: 100%;
        }
    }
    ……

把margin-left和margin-right改成正數（我改成了10）

@media screen and(max-width: 480px) {
    .page-content {
        margin-left: 10px;//改成正數
        margin-right: 10px;//同上
        .column {
            display: block;
        }
        .column-2>*,
        .column-3>*{
            width: 100%;
        }
    }
    ……

最後hexo三連

hexo cl
hexo g
hexo d

再用手機訪問，問題就解決了(￣▽￣)ノ