响应式页面-bootstrap分辨率

media按照px单位来写。也可使用em来写。

body {font-size : 14px;}
/*320及以下iphone5及以下*/
@media (max-width: 320px) {
  body {font-size: 14px !important;}
}
/*iphone5以上*/
@media screen and (min-width: 321px) and (max-width: 767px){
  body {font-size: 16px !important;}
}
/*大于ipad的尺寸*/
@media screen and (min-width: 767px){
  body {font-size: 14px !important;}
}
html{height: 100%;}
body {display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
     -webkit-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;
     min-height: 100vh; min-height: 100%; display: block\0;}
main{-webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1;}


/* pcll */
@media screen and (min-width: 1200px){
}
/* pcxx */
@media screen and (min-width: 992px) and (max-width: 1200px){
}
/* /wap */
@media screen and (min-width: 768px){
}
/*pad*/ /*wap*/
@media (max-width: 992px){
}
/*pad*/
@media screen and (min-width: 768px) and (max-width: 992px){
}
/*wap*/
@media (max-width: 767px) {
}