H5響應(yīng)式開發(fā)之首頁內(nèi)容（四）
網(wǎng)頁字體自適應(yīng)調(diào)整
在之前我們的主頁已經(jīng)編寫完成，但是作為自適應(yīng)的頁面，當(dāng)我們的頁面縮小時(shí)，在不同的設(shè)備上字體的大小因?yàn)闃邮降脑?，并沒有發(fā)生改變，還是PC端字體的大小，為了適應(yīng)不同設(shè)備的尺寸，我們需要對頁面字體的大小進(jìn)行判斷。
@media：
使用 @media 查詢，你可以針對不同的媒體類型定義不同的樣式。
@media 可以針對不同的屏幕尺寸設(shè)置不同的樣式，特別是如果你需要設(shè)置設(shè)計(jì)響應(yīng)式的頁面，@media 是非常有用的。
當(dāng)你重置瀏覽器大小的過程中，頁面也會(huì)根據(jù)瀏覽器的寬度和高度重新渲染頁面。
/*小屏幕 大于等于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;
}
}我們上面對屏幕分辨率在大于768px.大于992px和大于1200px時(shí)候字體段落的大小進(jìn)行調(diào)整。這也是為什么在現(xiàn)在這個(gè)時(shí)代同一個(gè)網(wǎng)頁排版在不同的設(shè)備上都能夠去恰當(dāng)?shù)娘@示的原因，當(dāng)我們的屏幕分辨率不同時(shí)，我的網(wǎng)頁的字體大小也會(huì)跟著不同。
本章難點(diǎn)
針對不同的屏幕分辨率，設(shè)置不同的字體大小
@media的使用
