Hugo主题实现自适应布局, 及自定义字体

做事情的三分钟热度继续中，完善了博客的归档、标签云、平常观看的影视页面及文章页评论、标签等功能。由于当下移动设备为我们主要的浏览窗口，所以页面需考虑在对应的终端设备中实际的浏览体验。

简单直接的方法，在页面样式表中添加@media，并在对应的尺寸范围中完善所需的样式：

@media (max-width:700px){
/* 浏览器宽度尺寸小于700所呈现的样式 */
}

@media screen and (min-width:700px) and (max-width:900px){
/* 浏览器宽度尺寸大于700小于900所呈现的样式 */
}

@media (min-width:900px){
/* 浏览器宽度尺寸大于700所呈现的样式 */
}

/* 根据每个页面实际的呈现需要，调整尺寸或自适应的分段需求 */

详细参数及解释参考：利用@media screen 实现网页布局的自适应

扩展

之前文章中提到标题采用了"得意黑"开源字体，记录下如何自定义字体，在样式文件中添加：

@font-face {
  font-family: SmileySans; /* 名称自定义 */
  src: url('../fonts/SmileySans-Oblique.ttf.woff2') format('woff2');
  /* 建议采用woff2格式，以降低容量大小，提高加载速度 */
}

之后在需要调用此字体的样式文件中直接使用:

body {
  font-family: SmileySans;
}

结尾

博客所需的，整体折腾得差不多了，过程很有趣及兴奋，就连大年三十都在乐此不疲的折腾着～～。随着这个年也已过完，接下来的重点也是 2023 年重点，努力挣钱～挣钱～～挣钱～～～加油。