Typecho默认主题移动端设备显示搜索框

前言：Typecho的默认主题只在PC端显示，手机端是不显示搜索框和侧边栏的

修改方法：

编辑主题header.php文件，将原文的

            <div class="site-name col-mb-12 col-9">
                <?php if ($this->options->logoUrl): ?>
                    <a id="logo" href="<?php $this->options->siteUrl(); ?>">
                        <img src="<?php $this->options->logoUrl() ?>" alt="<?php $this->options->title() ?>"/>
                    </a>
                <?php else: ?>
                    <a id="logo" href="<?php $this->options->siteUrl(); ?>"><?php $this->options->title() ?></a>
                    <p class="description"><?php $this->options->description() ?></p>
                <?php endif; ?>
            </div>
            <div class="site-search col-3 kit-hidden-tb">
                <form id="search" method="post" action="<?php $this->options->siteUrl(); ?>" role="search">
                    <label for="s" class="sr-only"><?php _e('搜索关键字'); ?></label>
                    <input type="text" id="s" name="s" class="text" placeholder="<?php _e('输入关键字搜索'); ?>"/>
                    <button type="submit" class="submit"><?php _e('搜索'); ?></button>
                </form>
            </div>

修改为

<div class="site-name col-mb-12 col-tb-8 col-9">
<?php if ($this->options->logoUrl): ?>
    <a id="logo" href="<?php $this->options->siteUrl(); ?>">
        <img src="<?php $this->options->logoUrl() ?>" alt="<?php $this->options->title() ?>" />
    </a>
<?php else: ?>
    <a id="logo" href="<?php $this->options->siteUrl(); ?>"><?php $this->options->title() ?></a>
    <p class="description"><?php $this->options->description() ?></p>
<?php endif; ?>
</div>
<div class="col-mb-12 col-tb-3 col-3">
    <div class="site-search col-mb-6 col-tb-12 col-12" style="margin-left:25%;">
        <form id="search" method="post" action="<?php $this->options->siteUrl(); ?>" role="search">
            <label for="s" class="sr-only">搜索关键字</label>
            <input type="text" id="s" name="s" class="text" placeholder="输入关键字搜索"/>
            <button type="submit" class="submit">搜索</button>
        </form>
    </div>
</div>

效果

分析：

将grid.css代码格式化后可以看出

//源代码较长，只写了摘要内容

//无媒体查询，即为默认
col-mb

@media(min-width:768px){
    col-tb
}
@media(min-width:992px){
    col
}
@media(min-width:1200px){
    col-wd
}

@media(max-width:767px) {
    .kit-hidden-mb {
        display: none;
    }
}
@media(max-width:991px) {
    .kit-hidden-tb {
        display: none;
    }
}
@media(max-width:1199px) {
    .kit-hidden {
        display: none;
    }
}

即表示：

宽度小于768px时为默认样式，使用 col-mb-n(n为1-12) 设置宽度。
宽度大于768px，小于992px时，使用 col-tb-n(n为1-12) 设置宽度。
宽度大于992px，小于1200px时，使用 col-n(n为1-12) 设置宽度。
宽度大于1200px时，使用 col-wd-n(n为1-12) 设置宽度。