体育游戏app平台然则怎么兼容统统主流确立就成了问题-开云·kaiyun体育「中国大陆」官方网站 登录入口

经常为不同分辨率确立或不同窗口大小下布局错位而头疼,不错利用@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发布于：湖南省声明：该文不雅点仅代表作家本东说念主，搜狐号系信息发布平台，搜狐仅提供信息存储空间管事。