@media的用法

时间：2025-04-05 11:05:11


直接写在＜style＞标签里： 



@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
  .class {
    background: #ccc;
  }
}


写法是前面加@media，其它跟link里的media属性相同。


Max Width
下面的样式会在可视区域的宽度小于 600px 的时候被应用。 


@media screen and (max-width: 600px) {
  .class {
    background: #fff;
   你的样式
  }
}


Min Width


下面的样式会在可视区域的宽度大于 900px 的时候被应用。 


@media screen and (min-width: 900px) {
  .class {
    background: #fff;
  }
}




Multiple Media Queries
你还可以使用过个匹配条件，下面的样式会在可视区域的宽度在 600px 和 900px 之间的时候被应用。 


@media screen and (min-width: 900px) {
  .class {
    background: #fff;
  }
}




@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){ //<=767的设备 }


另一种是直接在link中判断设备的尺寸，然后引用不同的css文件： 


<link rel="stylesheet" type="text/css" href="" media="screen and (min-width: 400px)">

意思是当屏幕的宽度大于等于400px的时候，应用


在media属性里：


screen 是媒体类型里的一种，CSS2.1定义了10种媒体类型
and 被称为关键字，其他关键字还包括 not(排除某种设备)，only(限定某种设备)
(min-width: 400px) 就是媒体特性，其被放置在一对圆括号中。 


<link rel="stylesheet" type="text/css" href=""  media="screen and (min-width: 600px) and (max-width: 800px)">


常用的：


                   。。。                          。。。                          。。。     。。。


    小于768的      768px      768和992之间的        992px       992和1200间的      1200px     大于1200   




bootstrap的断点值：


/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
{ ... col-sm-3... }




/* 小屏幕（平板，大于等于 768px） */
@media (min-width: 768px) { ... col-sm-3... }


/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: 992px) { ... col-md-3...}


/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: 1200px) { ... col-lg-3...}  




总结：顺序不能反


@media (max-width: 767px)  { ... col-xs-3... }  { //<=767的设备 }  手机
@media (min-width: 768px)  { ... col-sm-3... }  { //>=768的设备 }  平板
@media (min-width: 992px)  { ... col-md-3...}   { //>=992的设备 }  电脑
@media (min-width: 1200px) { ... col-lg-3...}  { //>=1200的设备 }  大显示器











































相关文章