媒體查詢簡單應用——網頁字體自適應窗口大小

什麼是媒體查詢?

答:媒體查詢是向不同設備(手機,平板,電腦)提供不同樣式的一種不錯方式,它爲每種類型的用戶提供了最佳的體驗。

舉一個簡單的例子:網頁的字體大小隨窗口的大小而改變

@media screen and(min-width:900px) //窗口寬度大於900px
{
  body{
       font-size:25px;
      }
}

@media screen and(min-width:500px)and(max-width:900px) //窗口寬度大於500px小於900px
{
  body{
       font-size:20px;
      }
}

@media screen and(max-width:500px) //窗口寬度小於500px
{
  body{
       font-size:15px;
      }
}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章