當(dāng)今科技時代，設(shè)計網(wǎng)站頁面時，無論是自適應(yīng)設(shè)置，還是響應(yīng)式布局，都離不開 @media screen  來實現(xiàn)網(wǎng)頁的布局。

利用好 @media screen 實現(xiàn)網(wǎng)頁布局的自適應(yīng)，可以給網(wǎng)頁帶來更多效果。

優(yōu)點：無需插件和手機(jī)主題，對移動設(shè)備友好，能夠適應(yīng)各種窗口大小。只需在CSS中添加 @media screen 屬性，根據(jù)瀏覽器寬度判斷并輸出不同的長寬值。

1280分辨率以上（大于1200px）

@media screen and (min-width:1200px){

}

1100分辨率（大于960px，小于1199px）

@media screen and (min-width: 960px) and (max-width: 1199px) {

}

880分辨率（大于768px，小于959px）

@media screen and (min-width: 768px) and (max-width: 959px) {

}

720分辨率（大于480px，小于767px）

@media only screen and (min-width: 480px) and (max-width: 767px){
   
}

440分辨率以下（小于479px）

@media only screen and (max-width: 479px) {

}

再分享下個人平時常用三尺寸

對應(yīng)PC端頁面 1000px以上

@media screen and (min-width:1000px){

}

對應(yīng)平板端頁面 768px以上-1000px以下

@media screen and (min-width:768px) and (max-width:1000px){

}

對應(yīng)手機(jī)端頁面 768px以下

@media screen and (max-width:768px){

}

對網(wǎng)頁開發(fā)的您，請收藏起來呀！這樣方便以后您要使用時，可以直接打開網(wǎng)頁參照一下。