網頁字體自適應調整
在之前我們的主頁已經編寫完成，但是作為自適應的頁面，當我們的頁面縮小時，在不同的裝置上字體的大小因為樣式的原因，並沒有改變，還是PC端字體的大小，為了適應不同裝置的尺寸，我們需要對頁面字體的大小進行判斷。
@media：
使用 @media 查詢，你可以為不同的媒體類型定義不同的樣式。
@media 可以為不同的螢幕尺寸設定不同的樣式，特別是如果你需要設定設計響應式的頁面，@media 是非常有用的。
當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。
/*小屏幕 大于等于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時候字體段落的大小進行調整。這也是為什麼在現在這個時代同一個網頁排版在不同的裝置上都能夠去恰當的顯示的原因，當我們的螢幕解析度不同時，我的網頁的字體大小也會跟著不同。
本章困難
針對不同的螢幕分辨率，設定不同的字體大小
@media的使用
