由于我使用的主题并没有适配移动端,在手机上浏览的体验不是很好,于是需要对博客主题进行魔改,使博客更好的适配不同屏幕宽度的移动设备

设计移动端导航栏

我的导航栏是顶部长长的一条,在移动端字体会非常小,很不好看,强行调大字体又会破坏布局,影响美观。所以我重新设计了移动端专用的导航栏。

Before

之前的导航栏

After

改版后

加入Viewport Meta

首先在<head>标签内加入viewport meta,然后才可以使用 @media screen and (max-width: XXX px){}来针对不同的屏幕宽度使用不同的CSS。

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

设计导航栏

自行发挥…我使用一个侧边栏菜单按钮+标题的形式。

<div class="mobile-navbar">
	<div class="mobile-navbar-icon">
		<i class="fa fa-bars" aria-hidden="true"></i>
	</div>
	<div class="mobile-navbar-title">
		<a href="{{ "/" | relURL }}" class="logo">MAKE YOURSELF BETTER</a>
	</div>  
</div>
.mobile-navbar {
  display: none; //调样式时可以先设为block
  position: absolute;
  top: 0;
  width: 100%;
  height: 40px;
  text-align: center;
  background: #4A4A4A;
  box-shadow: 0px 1px 1px #cacaca;
}

.mobile-navbar-icon {
  padding: 8px 4px 0px 4px;
  font-size: 20px;
  color:#F5F5F5;
  width: 50px;
  float: left;
}

.mobile-navbar-title {
  display: inline-block;
  letter-spacing: 1.5px;
  padding: 10px 0px 0px 4px;
  font-size: 16px;
  font-weight: bolder;
}

适配移动端

使用 @media screen and (max-width: 600px){},对600px宽度以下的设备启用额外的CSS样式:移动端导航栏显示,PC端导航栏消失。

@media screen and (max-width: 600px) {
  .mobile-navbar {
    display: block;
  }
  .navbar {
    display: none;
  }
}

这里只写了导航栏,可以按照实际需要写其他的控制。

加入侧边栏

用了一个现成的开源侧边栏实现: SlideOut.js , README已经详细介绍了使用方式,复制粘贴然后按照自己的需求改改就行了。

slideout

这是我的菜单栏样式

.mobile-menu {
  display: none;
  background-color: #4a4a4a;
}

.mobile-menu ul {
  list-style-type: none;
  padding: 30px;
  margin: 0;
}

.mobile-menu li {
  padding: 0px 8px 32px 8px;
  letter-spacing: 1.5px;
  font-size: 24px;
}

.mobile-menu li a {
  color: #FFFFFF;
  text-decoration: none;
}

.mobile-menu li a:hover {
  color: #00B2A0;
}

调整字体大小

把CSS样式中的字体大小单位统一由 px 替换为 rem,后者是CSS3新增的一个相对单位(相对HTML根元素),所以需要先设置一个合适的根元素字体大小

html {
  font-size: 16px;
}

然后调整其他字体大小单位为rem即可,1.0rem = 16px, 2.0rem = 32px

h1 {
  font-size: 1.68rem;
  margin-top: 50px;
  margin-bottom: 10px;
}

h2 {
  font-size: 1.5rem;
  margin-top: 50px;
  margin-bottom: 10px;
}

h3 {
  font-size: 1.31rem;
  margin-top: 50px;
  margin-bottom: 10px;
}

然后针对不同屏幕宽度,直接调整根元素字体大小即可

@media screen and (min-width:360px) {
    html { font-size: 11px; }
}
@media screen and (min-width:375px) {
    html { font-size: 12px; }
}

至此,基本的移动端适配就差不多了。