在开发 Hugo 的主题中，移动端的体验是必不可少的，我总结了一些经验。
一般情况下，只需要支持手机和非手机两种就行了，如果你做的比较细致，可以分三档，这样平板的体验就会好一些。
为了更好的兼容手机展示，我们需要写大量的媒体查询的css，这样是很复杂的。为了优化这个问题，我们需要引入断点管理。
我使用sass进行开发，如果你目前还是手写css的话，不妨先看一下这篇文章：
在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来自聪明的汤姆。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。