H5響應(yīng)式開發(fā)之首頁(yè)內(nèi)容（四）
網(wǎng)頁(yè)字體自適應(yīng)調(diào)整
在之前我們的主頁(yè)已經(jīng)編寫完成，但是作為自適應(yīng)的頁(yè)面，當(dāng)我們的頁(yè)面縮小時(shí)，在不同的裝置上字體的大小因?yàn)闃邮降脑?，並沒有改變，還是PC端字體的大小，為了適應(yīng)不同裝置的尺寸，我們需要對(duì)頁(yè)面字體的大小進(jìn)行判斷。
@media：
使用 @media 查詢，你可以為不同的媒體類型定義不同的樣式。
@media 可以為不同的螢?zāi)怀叽缭O(shè)定不同的樣式，特別是如果你需要設(shè)定設(shè)計(jì)響應(yīng)式的頁(yè)面，@media 是非常有用的。
當(dāng)你重置瀏覽器大小的過程中，頁(yè)面也會(huì)根據(jù)瀏覽器的寬度和高度重新渲染頁(yè)面。
/*小屏幕 大于等于768px*/
@media (min-width: 768px) {
.tab-h2{
font-size: 26px;
}
.tab-p{
font-size: 16px;
}
.text h3{
font-size: 22px;
}
.text p{
font-size: 16px;
}
}
/*中等屏幕 大于等于992px*/
@media (min-width: 992px) {
.tab-h2{
font-size: 28px;
}
.tab-p{
font-size: 17px;
}
.text h3{
font-size: 24px;
}
.text p{
font-size: 18px;
}
}
/*大屏幕 大于等于1200px*/
@media (min-width: 1200px) {
.tab-h2{
font-size: 30px;
}
.tab-p{
font-size: 18px;
}
.text h3{
font-size: 26px;
}
.text p{
font-size: 19px;
}
}我們上面對(duì)螢?zāi)唤馕龆仍诖箪?68px.大於992px和大於1200px時(shí)候字體段落的大小進(jìn)行調(diào)整。這也是為什麼在現(xiàn)在這個(gè)時(shí)代同一個(gè)網(wǎng)頁(yè)排版在不同的裝置上都能夠去恰當(dāng)?shù)娘@示的原因，當(dāng)我們的螢?zāi)唤馕龆炔煌瑫r(shí)，我的網(wǎng)頁(yè)的字體大小也會(huì)跟著不同。
本章困難
針對(duì)不同的螢?zāi)环直媛剩O(shè)定不同的字體大小
@media的使用
