声明:技术都是从老蘑菇那边学来的

老蘑菇博客:https://m1314.cn/

如有冒犯,请联系博主删除!

前言:

教学针对主要Sakura主题,就是博主的网站主题,里面的一些技巧,有的是通用的。

第一个美化技巧教你如何美化移动端:

众所周知,手机性能不如电脑,加载网页如果特效过多就会使网页打开过慢,所以Sakura主题的作者白猫大大,把移动端的一些特效给屏蔽了,而我们要做的就是把屏蔽去掉就行了。

首先要明确一件事Sakura主题的移动端的CSS都是在@media (max-width:860px) 内,这句意思是当屏幕宽度小于860像素才会生效。

就拿老蘑菇的博客为例,可能他为了博客打开的速度所以没开移动端美化。

然后这是我开了美化的效果

可能是因为我对美比较执着吧,哈哈哈,就是这样。

移动端信息区块显示:

可以使用站点后台更改,但可能会报错,最好直接修改文件,打开style.css

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

去掉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;
    }
}

学废了,留个言吧


一个爱好捣鼓网站的男孩纸!