频频为不同分辨率设置或不同窗口大小下布局错位而头疼,不错利用@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这里指定了泄露器为泄露设置开云(中国)kaiyun网页版登录入口，也不错是print打印机等其他设置，一般咱们用screen。约略干脆不详。

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