MENU

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

March 28, 2021 • Read: 436 • 默认分类

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

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

1.文字logo美化

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

首先来看看效果

修改前

修改后

修改style.css

找到@media (max-width:860px) { 所属的.site-header {

大概是在5137行左右,实在找不到你可以Ctrl+F查找

将其替换

    .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;
    }
}

预览

- - - The END - - -
  • 文章作者:谭先生
  • 版权所有:文章转载时,注明出处即可!
  • 本站部分资源收集于网络,纯个人收藏,无商业用途,如有侵权请及时告知!
  • Last Modified: August 4, 2021
    Archives QR Code Tip
    QR Code for this page
    Tipping QR Code
    阅读:436