Hexo next自适应宽屏

发表于 | 更新于: 2020-03-08 | 分类于
字数统计: 167 | 阅读时长 ≈ 1 | 评论: | 阅读:

电脑屏幕都1920*1080了，用的next主题配置中只有960，文章只有可怜的700，这样看起来挺别扭的，特别是有代码块的时候，基本上都显示不完要滑动。可以通过修改next主题的文章页面宽度来解决。
打开\themes\next\source/css/_schemes/Picses/_layout.styl在文件末尾添加代码

// 以下为新增代码！！修改post宽度
header{ width: 80% !important; }
header.post-header {
  width: auto !important;
}
.container .main-inner { width: 80%; }
.content-wrap { width: calc(100% - 260px); }

.header {
  +tablet() {
    width: auto !important;
  }
  +mobile() {
    width: auto !important;
  }
}

.container .main-inner {
  +tablet() {
    width: auto !important;
  }
  +mobile() {
    width: auto !important;
  }
}

.content-wrap {
  +tablet() {
    width: 100% !important;
  }
  +mobile() {
    width: 100% !important;
  }
}

文章参考：https://ihaoming.top/archives/9a935f57.html

0%