转自我的博客
这几天基于react开发了一个简单的博客，posts放在GitHub Gists上，省却了server端。
前端开发对于我来说并不陌生，或多或少接触过一些，之前还完成过coursera上一门关于前端开发的课程。
但是对于移动端适配，响应式布局我一直是一知半解的，因为没有自己动手从头到尾完整开发过一个东西。
只是简单套用过bootstrap的栅格布局，对于移动端适配没有直接的体验，所以感到很模糊。
这次基于github的api自己打造一个博客，完全自己写前端页面，到是很好的一次巩固前端技能的机会。
下面进入正题。
所谓移动端适配是指，在电脑屏幕上显示正常的页面在移动设备上也能正确显示，
移动设备就是指各种尺寸的手机、pad等。
响应式布局可以说是移动端适配的一个解决方案，根据不同的移动设备尺寸，显示不同的页面布局。
我们知道移动设备的屏幕尺寸小，且千差万别，如果还按照原始页面定义的css来展示，可能会出现字体过大，
按钮错位，图标挤在一起等现象。 比如下面这张图，是我最开始开发的博客页面，在移动设备(小米6)上
表现很差。
开始的博客页面
为了更好的适配移动端，我做了下面两点工作：
- 使用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;
}
}
- 基于屏幕尺寸修改页面布局
对于移动端设备，我对博客页面做了调整，将时间拿到了标题的下面，而tag浮动到了最右边，分两行展示。
这样就不会现标题、标签、时间全挤在一行的景象。做这个的时候才体会到bootstrap栅格布局的好处，使用
bootstrap自带css，能自动适配屏幕大小，显示不同的页面布局。这里我没采用bootstrap，自己写媒体查询
实现了布局的改动，如下：
@media only screen and (max-width: 900px) {
.date {
float: none;
display: block;
}
.badge-label {
float: right;
}
}
最后页面是这个样子的:
最终页面
网友评论