現在移動端設備的普及下,除了辦公和游戲外使用電腦的次數越來越少,基本上都成為了低頭一族。而這苦了一些網頁前端的設計人員,為了能讓網頁適應PC端又同時適配移動端的前提下。自適應響應式網頁就成為了當前的主流。

国产视频app自適應網頁在不同設備或不同分辨率下,顯示的布局是不同的。為了不讓頁面變形,而更好來美化網頁,我們可以利用@media screen實現網頁布局的自適應。

国产视频app@media screen雖然可以實現網頁布局的自適應,但是怎樣兼容所有主流設備就成了問題。到底分辨率是多少的時候設置呢?

@media screen 使用方法

下面的代碼是我們從bootstrap遍歷出來的關于控制自適應的代碼

@media print
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}
@media(max-width:767px){}

說明:從上頁的代碼中,我們不難看出min-width來確認分別是768、992、1200的分辨率。當然以前也有些老的設備寬度是600、480的,那些小分辨率的我們都歸類為小于767的。為什么是小于767而不是768呢,那是因為在css中@media (min-width: 768px)表示最小是768也就是>=768,這里有等于,所以我們判斷更小的設備用@media (max-width: 767px)表示<=767就不會有沖突了。

@media screen 最小寬度

国产视频app從上面的代碼中,可以看出有幾個臨界點的分辨率,通過他們我們可以寫出自己的自適應代碼

@media (min-width:768px){ //>=768px的設備 }
@media (min-width:992px){ //>=992px的設備 }
@media (min-width:1200){ //>=1200px的設備 }

注意下它們順序,如果你把@media (min-width: 768px)寫在了下面那么很悲劇,如下面的代碼

国产视频app注意:此代碼為錯誤的寫法

@media (min-width:1200px){ //>=1200px的設備 }
@media (min-width:992px){ //>=992px的設備 }
@media (min-width:768px){ //>=768px的設備 }

国产视频app因為如果是1440,由于1440>768那么你的1200就會失效。

我們用min-width時,要注意他們的排列順序,小的放上面大的在下面(從小到大)

@media screen 最大寬度

国产视频app既然我們可以使用min-width,也可以使用max-width來進行分辨率的劃分,max-width的排列順是大的在上面,小的在下面(從大到小)

@media (max-width:1199px){ //<=1199px的設備 }
@media (max-width:991px){ //<=991px的設備 }
@media (max-width:767px){ //<=768px的設備 }

国产视频app通過上面的舉例,我們可以靈活的來運用這些代碼,來達到網頁可以自適應各和設備的目的

@media and (min-width:1200px){//>=1200px的設備} 
@media and (min-width: 960px) and (max-width:1199px) {//<=1199px and >=960px的設備:PC端;}
@media and (min-width: 768px) and (max-width:959px) {//<=959px and >=768px的設備:PC端;}
@media and (min-width: 640px) and (max-width:767px) {//<=767px and >=640px的設備:平板端或者手機橫屏;}
@media and (min-width: 480px) and (max-width:639px) {//<=639px and >=480px的設備:手機橫屏;}
@media and (min-width: 320px) and (max-width:479px) {//<=479px and >=320px的設備:手機豎屏;}
@media and (min-width: 240px) and (max-width:319px) {//<=479px and >=320px的設備:手機豎屏;}
@media and (max-width:239px){//<=239px的設備:手機豎屏}