每每为不同分辨率配置或不同窗口大小下布局错位而头疼,不错利用@media screen完竣网页布局的自相宜,可是怎样兼容通盘主发配置就成了问题。到底分辨率是几许的本领缔造呢？

先看底下的代码,这是从bootstrap中遍历出来的，min-width来证明鉴别是

768、 992、1200。诚然了当年也有些配置宽度是600 480的，哪些小分辨率的咱们皆归类为小于767的。为什么是小于767而不是768呢，那是因为在css中@media (min-width: 768px)暗示最小是768也等于>=768，这里有等于，是以咱们判断更小的配置用@media (max-width: 767px)这边暗示<=767就不会有破损了

@media完竣网页自相宜

从上头咱们不错看出有几个临界点的分辨率，那么咱们就不错松驰的来写我方的自相宜代码了

@media (min-width: 768px){ //>=768的配置 }

@media (min-width: 992px){ //>=992的配置 }

@media (min-width: 1200){ //>=1200的配置 }

细心下规章，若是你把@media (min-width: 768px)写在了底下那么很悲催，

@media (min-width: 1200){ //>=1200的配置 }

@media (min-width: 992px){ //>=992的配置 }

@media (min-width: 768px){ //>=768的配置 }

因为若是是1440,由于1440>768那么你的1200就会失效。

是以咱们用min-width时，小的放上头大的不才面，同理若是是用max-width那么等于大的在上头，小的不才面

@media (max-width: 1199){ //<=1199的配置 }

@media (max-width: 991px){ //<=991的配置 }

@media (max-width: 767px){ //<=768的配置 }

//

@media screen and (min-width:1200px){ #page{ width: 1100px; }#content,.div1{width: 730px;}#secondary{width:310px} }

@media screen and (min-width: 960px) and (max-width: 1199px) { #page{ width: 960px; }#content,.div1{width: 650px;}#secondary{width:250px}select{max-width:200px} }

@media screen and (min-width: 768px) and (max-width: 959px) { #page{ width: 900px; }#content,.div1{width: 620px;}#secondary{width:220px}select{max-width:180px} }

@media only screen and (min-width: 480px) and (max-width: 767px){ #page{ width: 450px; }#content,.div1{width: 420px;position: relative; }#secondary{display:none}#access{width: 450px; }#access a {padding-right:5px}#access a img{display:none}#rss{display:none}#branding #s{display:none} }

@media only screen and (max-width: 479px) { #page{ width: 300px; }#content,.div1{width: 300px;}#secondary{display:none}#access{width: 330px;} #access a {padding-right:10px;padding-left:10px}#access a img{display:none}#rss{display:none}#branding #s{display:none}#access ul ul a{width:100px} }

上头的代码顶用到了 screen这里指定了裸露器为裸露配置欧洲杯app，也不错是print打印机等其他配置，一般咱们用screen。简略干脆不详。

minmaxwidthscreenmedia发布于：湖南省声明：该文不雅点仅代表作家本东说念主，搜狐号系信息发布平台，搜狐仅提供信息存储空间就业。