『Sakura主题美化#09』Sakura主题移动端美化

本文主要说明Sakura主题的移动端的主题美化，参考：主题手机端主页优化 & 如何美化移动端显示

首先要明确一件事 Sakura 主题的移动端的 CSS 都是在 @media (max-width:860px) 内，这句意思是当屏幕宽度小于 860 像素才会生效，移动端用的字体是 chinese-font
如果你需要更多样式请自行查看CSS手册修改，本人前端白痴+审美障碍，真心帮不了你~

1.文字logo美化

按照 Sakura主题美化系列（六）如何实现Sakura主题原作者logo效果 我们已经将PC端的文字logo美化了，可是移动端logo自适应之后效果直接没有了，所以我们要将其复原回来~(ps:此教程目前适用于与我同款文字logo，其他类型还请自行测试）

首先来看看效果

修改style.css

将其替换成

    .header-user-avatar img {
    display: none;/*移动端搜索关闭*/
    }
    i.iconfont.js-toggle-search.iconsearch {
    display: none;/*移动端登录关闭*/
    }
    .site-header {/*移动端logo后背板高度*/
    height: 65px;
    }

然后将后面的.site-branding {

    .site-branding {
        float: right;
        height: 50px;
        line-height: 43px;
        margin-right: -30px;/*移动端logo位置*/
        margin-top: -10px;
    }

到这里我们css就修改完成了

修改footer.php

将这段删除即可

之后保存就可以看到效果了

移动端首页信息块显示

修改style.css

<div class="focusinfo"> 该区块存放里有你的信息，在手机端被 display:none 了，所以需要注释掉。

去掉之后还需要美化下样式，加入如下 CSS

/*移动端美化样式*/
@media (max-width:860px) {
 
    /*cusinfo .header-tou img {
    }移动端的头像样式自己改*/
    .center-text {
        /*移动端文字大小*/
        font-size: 40px;
    }
 
    .focusinfo .header-info {
        /*移动端首页一句话*/
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        background: none !important
    }
 
    .focusinfo .header-info .top-social_v2 {
        /*移动端社交图标*/
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 15px 0px;
    }
 
    #centerbg {
        /*移动端背景全屏*/
        height: 100vh;
    }
}

预览