【前端資源】Media Queries 網站收集

Media Queries 這個網站收集了各種利用 Media Queries 技術實作的網站。


進入此網站會看到一系列的網站截圖,每一個網站均同時以四張不同螢幕尺寸的截圖呈現,這四個尺寸分從左到右如下:
  • Smartphone:320px 
  • Tablet:768px 
  • Netbook:1024px 
  • Desktop:1600px
點擊任何一張圖片會進入連結網站,並分別以不同的裝置檢視。你可以在這個網站檢視利用 Media Queries 實作,根據不同裝置螢幕尺寸動態調整網站內容配置的實際網站。檢視這些網站可以看到所套用的 @media 樣式,以下列舉的是 Media Queries 這個網站本身套用的 @media 樣式。

@media screen and min-width30em{…}
@media screen and min-width33em{}
@media screen and min-width40em{}
@media screen and min-width48em{}
@media screen and min-width56em{}


沒有留言: