Hexo博客Next主题如何在移动端上设置不同的背景

Posted on | In | Comments:
| Symbols count in article: 9.2k | Reading time ≈ 8 mins.

基本的背景添加

如果学过CSS函数，就可以很容易的明白如何自定义一个新的背景，当然，本教程面向html小白。（虽然我自己也比较菜就是了）

我们在网络上看到的教程有教学如何添加背景，根据hexo的机制。我们常用到

/themes/hexo-themes-next(任意合适的主题)/source/css/_custom/custom.styl

这个自定义文件去修改我们网页的布局。

一般的添加背景是通过修改body元素：

body{
    background:url(/images/bg.jpg);
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;  
}

都是非常基本的元素设置，例如size，repeat，attachment等等子选项。

移动端设置

但是我们一般的网页布局都是横构图，且背景图片常因中心需要填充内容，设计上主要内容都会往两边靠。所以为了适配移动端我们可能需要找到一张合适的竖构图海报背景重新作为我们的博客背景图片。

设置移动端很简单，这里我们只需要用到一个规则

@media

这个规则很简单，我们通过一个实例去理解它

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

顾名思义，使用@media` 规则可以为不同的媒体类型/设备应用不同的样式。

媒体查询可用于检查内容，例如：

  • 视窗的宽度和高度
  • 设备的宽度和高度
  • 方向（平板电脑/手机处于横向还是纵向模式？）
  • 解析度

因此上面的代码内容执行的效果为：当浏览器窗口的宽度为600px或更小时，将<body>元素的背景颜色更改为“浅蓝色”。

那么同理，作为一个设备长宽的判断我们还可以利用它去适配更多的设备。

由于大多数人都使用手机浏览网站，我们需要知道手机的参数。这些参数被记录在

/themes/hexo-themes-next(任意合适主题)/source/css/_mixins/base.styl

mobile-smallest() {
  @media (max-width: 413px) {
    {block}
  }
}

mobile-small() {
  @media (max-width: 567px) {
    {block}
  }
}

mobile() {
  @media (max-width: 767px) {
    {block}
  }
}

tablet-mobile() {
  @media (max-width: 991px) {
    {block}
  }
}

tablet() {
  @media (min-width: 768px) and (max-width: 991px) {
    {block}
  }
}

desktop() {
  @media (min-width: 992px) {
    {block}
  }
}

desktop-large() {
  @media (min-width: 1600px) {
    {block}
  }
}

我们一般设置到Tablet的最大值即可，即

@media only screen and (max-width: 991px)

如果对设备还有其他的适配要求，例如平板浏览器以及手机浏览器仍需要不同的画面，可以依次类推设置。

我们只需要在Custom.styl里添加如下字符串就行了

body{
    background:url(/images/bg.jpg);
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;  
}

@media only screen and (max-width: 1000px) {
  body{
    background:url(/images/bg2.jpg);
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;  
}

}

iOS适配问题

但是通过此类单纯设置发现iOS的适配性很差，由于Hexo的渲染属于长条式，图片被失真拉伸，因此不美观，经过发现是background-attachment:fixed和 background-size:cover两项的共同输出结果不能被Safari识别渲染~~（iOS是真的让人无语了）~

这个时候我们需要更改如下的字符串

@media only screen and (max-width: 1000px) {
  body:before{
  content:"";
  display:block;
  position:fixed;
  top:0;
  left:0;
  bottom: 0;
  z-index:-1;
  width:100%;
  height:100vh;
  background:url(/images/bg2.png) center 0 no-repeat;
  background-size:cover;
  }
}

通过强制固定来保证fixed的执行。

-------------EndThanks for reading-------------
0%