轉(zhuǎn)自我的博客
這幾天基于react開發(fā)了一個(gè)簡單的博客帆竹，posts放在GitHub Gists上瓶蝴，省卻了server端孝偎。
前端開發(fā)對(duì)于我來說并不陌生映皆，或多或少接觸過一些挤聘，之前還完成過coursera上一門關(guān)于前端開發(fā)的課程。
但是對(duì)于移動(dòng)端適配捅彻，響應(yīng)式布局我一直是一知半解的组去，因?yàn)闆]有自己動(dòng)手從頭到尾完整開發(fā)過一個(gè)東西。
只是簡單套用過bootstrap的柵格布局步淹，對(duì)于移動(dòng)端適配沒有直接的體驗(yàn)从隆，所以感到很模糊。
這次基于github的api自己打造一個(gè)博客缭裆，完全自己寫前端頁面键闺，到是很好的一次鞏固前端技能的機(jī)會(huì)。
下面進(jìn)入正題澈驼。
所謂移動(dòng)端適配是指辛燥，在電腦屏幕上顯示正常的頁面在移動(dòng)設(shè)備上也能正確顯示，
移動(dòng)設(shè)備就是指各種尺寸的手機(jī)缝其、pad等购桑。
響應(yīng)式布局可以說是移動(dòng)端適配的一個(gè)解決方案，根據(jù)不同的移動(dòng)設(shè)備尺寸氏淑，顯示不同的頁面布局勃蜘。
我們知道移動(dòng)設(shè)備的屏幕尺寸小，且千差萬別假残，如果還按照原始頁面定義的css來展示缭贡，可能會(huì)出現(xiàn)字體過大炉擅，
按鈕錯(cuò)位，圖標(biāo)擠在一起等現(xiàn)象阳惹。 比如下面這張圖谍失，是我最開始開發(fā)的博客頁面，在移動(dòng)設(shè)備(小米6)上
表現(xiàn)很差莹汤。
為了更好的適配移動(dòng)端快鱼，我做了下面兩點(diǎn)工作：
- 使用rem作為單位代替px
rem是相對(duì)單位，px為固定單位纲岭。rem相對(duì)于根元素(html)定義的font-size大小而言抹竹。
html {
font-size: 10px;
}
p {
font-size: 1.4rem;
margin: 0.8rem 1.5rem;
}
對(duì)于上面這個(gè)例子，p元素的字體大小為14px止潮，間距為8px 15px.
有了rem這個(gè)單位窃判，就可以基于媒體查詢修改在不同屏幕尺寸下根元素的font-size,進(jìn)而改變所有元素的尺寸、間距等等喇闸。
下面這個(gè)例子袄琳，900px寬度以上屏幕，字體base是10px燃乍，900以下是8px唆樊。
html {
font-size: 10px;
}
@media only screen and (max-width: 900px) {
html {
font-size: 8px;
}
}
- 基于屏幕尺寸修改頁面布局
對(duì)于移動(dòng)端設(shè)備，我對(duì)博客頁面做了調(diào)整刻蟹，將時(shí)間拿到了標(biāo)題的下面逗旁，而tag浮動(dòng)到了最右邊，分兩行展示座咆。
這樣就不會(huì)現(xiàn)標(biāo)題、標(biāo)簽仓洼、時(shí)間全擠在一行的景象介陶。做這個(gè)的時(shí)候才體會(huì)到bootstrap柵格布局的好處，使用
bootstrap自帶css色建，能自動(dòng)適配屏幕大小哺呜，顯示不同的頁面布局。這里我沒采用bootstrap箕戳，自己寫媒體查詢
實(shí)現(xiàn)了布局的改動(dòng)某残，如下：
@media only screen and (max-width: 900px) {
.date {
float: none;
display: block;
}
.badge-label {
float: right;
}
}
最后頁面是這個(gè)樣子的:
