bootstrap @media width尺寸 划分

发布时间:2019-07-09 13:09:53编辑:丝画阁阅读(1200)

一、超大屏

@media screen and (min-width:1200px){
  }
	

二、1100分辨率(大于960px,小于1199px)

@media screen and (min-width: 960px) and (max-width: 1199px) {
}
	

三、880分辨率(大于768px,小于959px)

@media screen and (min-width: 768px) and (max-width: 959px) {
}
	

四、720分辨率(大于480px,小于767px)

@media only screen and (min-width: 480px) and (max-width: 767px){
}
	

五、440分辨率以下(小于479px)

@media only screen and (max-width: 479px) {
}
	

一. @media 格式

@media all and (min-width:xxx) and (max-width:xxx) (亦可以写成@media all and (min-width:xxx) and (max-width:xxx)) { /*这段查询的all是针对所有设备(有些设备不一定是屏幕,也许是打字机,盲人阅读器)*/ } @media only screen and (min-width:xxx) and (max-width:xxx){ /*上面针对了所有设备,这段是只(only)针对彩色屏幕设备*/ }
@media only screen and (min-width:1024px) and (max-width:1292px){ body div{
        font-size:30px; color:red;
} }

关于media媒体查询不生效的问题原因总结

1.and  后面一定要有空格~~~  切记

2.meta 里面需要加上一句话:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

关键字