在开发 Hugo 的主题中，移动端的体验是必不可少的，我总结了一些经验。

一、利用scss优化移动端样式

一般情况下，只需要支持手机和非手机两种就行了，如果你做的比较细致，可以分三档，这样平板的体验就会好一些。

为了更好的兼容手机展示，我们需要写大量的媒体查询的css，这样是很复杂的。为了优化这个问题，我们需要引入断点管理。

我使用sass进行开发，如果你目前还是手写css的话，不妨先看一下这篇文章：

在 Hugo 中使用 Sass

在scss文件中，加入以下的内容：

$breakpoints: ('medium': (min-width: 767px),'large': (min-width: 1226px));
/// Responsive manager.
/// @access public
/// @param {String} $breakpoint - Breakpoint
/// @requires $breakpoints
@mixin respond-to($breakpoint) {
    $raw-query: map-get($breakpoints, $breakpoint);
    @if $raw-query {
        $query: if(type-of($raw-query)=='string', unquote($raw-query), inspect($raw-query));
        @media #{$query} {
            @content;
        }
    }
    @else {
        @error 'No value found for `#{$breakpoint}`. '
        +'Please make sure it is defined in `$breakpoints` map.';
    }
}

这段scss起到的作用就是根据你定的breakpoint，在scss中快速加入断点查询。示例如下：

/// 默认用最小宽度写css
.title{
    font-size:18px;
    @mixin respond-to('medium'){
        font-size:20px;
    }
    @mixin respond-to('large'){
        font-size:24px;
    }
}

这样就相当于在一个块中，写完了这个元素在三种不同宽度下的表现，是不是比媒体查询好多了？

二、局域网手机设备调试

直接用浏览器的开发者功能也能调试，但是手机设备上的展示更加准确一些。

Hugo本身支持一个小而强悍的服务器，你可以这么做：

hugo server --bind=yourIP --baseURL=http://yourIP:1313

这里bind 参数后面跟着的是你的局域网IP，后面跟着的是带着 http://的局域网IP。

然后用手机访问这个地址，就可以预览了。

三、让手机调试更方便

实际的开发中，经常会通过二维码的方式来进行调试，这里我们通过在页面中增加一个二维码，简化输地址的流程。

我在左上角的title元素中，加入：

<h1 class="title">
    {{ if .Site.IsServer }}
    <a href="{{.Site.BaseURL}}" tooltip>{{ .Site.Title }}</a>
    {{ else }}
    <a href="{{.Site.BaseURL}}">{{ .Site.Title }}</a>
    {{ end }}
</h1>

这里的 {{ if .Site.IsServer }} 是用来判断当前是不是本地开发状态，如果是，加上一个tooltip。

在css中，加上：

[tooltip] {
  position: relative;
}

[tooltip]::after {
  display: none;
  content: url(http://qr.topscan.com/api.php?text={{.Site.BaseURL}});
  position: absolute;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-top: 20px;
  border-radius: 4px;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.4);
  z-index: 10;
  top:50px;
}

[tooltip]::before {
  display: none;
  content: "当前是开发环境，手机扫码预览";
  position: absolute;
  top:50px;
  width: 600px;
  font-size: $font-p;
  font-weight: 400;
  border: 5px solid transparent;
  border-bottom-width: 0;
  z-index: 20;
}

[tooltip]:hover::after {
  display: block;
}

[tooltip]:hover::before {
  display: block;
}

这里 content: url(http://qr.topscan.com/api.php?text={{.Site.BaseURL}}); 相当于生成了一个你本地url的二维码。

这样鼠标放到logo上的时候，就出现了如下效果：

预览二维码

这里的css来自聪明的汤姆。