首先要明确一件事 Sakura 主题的移动端的 CSS 都是在 @media (max-width:860px)
内,这句意思是当屏幕宽度小于 860 像素才会生效,移动端用的字体是 chinese-font
如果你需要更多样式请自行查看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;
}
}
预览
Comments | 10 条评论
有更详细的吗?
博主怎么像你这样把社交图标移动到侧边栏
博主我想问一下初学HTML,CSS,JS 后该如何学习可以做到您做的这个网站的程度呢
@Eddie 我只能建议你善用 F12,我并不是专业的开发
学废了

小白表示好难
美化系列教程讲的真详细
收藏收藏 
你好,我想问下,我手机端那三道杠的导航点开后一片空白是什么原因
博主博主,Safari浏览器移动端的返回顶部的按钮好像用不了诶
@Justlovesmile 没有苹果设备无法测试