关于移动端适配我学到了什么 #what #how

转自我的博客

---

这几天基于react开发了一个简单的博客，posts放在GitHub Gists上，省却了server端。

前端开发对于我来说并不陌生，或多或少接触过一些，之前还完成过coursera上一门关于前端开发的课程。
但是对于移动端适配，响应式布局我一直是一知半解的，因为没有自己动手从头到尾完整开发过一个东西。
只是简单套用过bootstrap的栅格布局，对于移动端适配没有直接的体验，所以感到很模糊。
这次基于github的api自己打造一个博客，完全自己写前端页面，到是很好的一次巩固前端技能的机会。

下面进入正题。

所谓移动端适配是指，在电脑屏幕上显示正常的页面在移动设备上也能正确显示，
移动设备就是指各种尺寸的手机、pad等。
响应式布局可以说是移动端适配的一个解决方案，根据不同的移动设备尺寸，显示不同的页面布局。
我们知道移动设备的屏幕尺寸小，且千差万别，如果还按照原始页面定义的css来展示，可能会出现字体过大，
按钮错位，图标挤在一起等现象。 比如下面这张图，是我最开始开发的博客页面，在移动设备(小米6)上
表现很差。

开始的博客页面

为了更好的适配移动端，我做了下面两点工作：

1. 使用rem作为单位代替px

rem是相对单位，px为固定单位。rem相对于根元素(html)定义的font-size大小而言。

html {
  font-size: 10px;
}

p {
  font-size: 1.4rem;
  margin: 0.8rem 1.5rem;
}

对于上面这个例子，p元素的字体大小为14px，间距为8px 15px.

有了rem这个单位，就可以基于媒体查询修改在不同屏幕尺寸下根元素的font-size,进而改变所有元素的尺寸、间距等等。
下面这个例子，900px宽度以上屏幕，字体base是10px，900以下是8px。

html {
  font-size: 10px;
}

@media only screen and (max-width: 900px) {
  html {
    font-size: 8px;
  }
}

2. 基于屏幕尺寸修改页面布局

对于移动端设备，我对博客页面做了调整，将时间拿到了标题的下面，而tag浮动到了最右边，分两行展示。
这样就不会现标题、标签、时间全挤在一行的景象。做这个的时候才体会到bootstrap栅格布局的好处，使用
bootstrap自带css，能自动适配屏幕大小，显示不同的页面布局。这里我没采用bootstrap，自己写媒体查询
实现了布局的改动，如下：

@media only screen and (max-width: 900px) {
  .date {
    float: none;
    display: block;
  }
  .badge-label {
    float: right;
   }
}

最后页面是这个样子的:

最终页面