Css3中有关的 @media 媒体查询相关的知识

1，书写格式

@media语法：

1. @media[mediatype][and|not|only]([mediafeature]){
2. /*css code*/
3. }

常用mediatype

all            用于所有设备

print        用于打印机和打印预览

screen    用于电脑屏幕、平板、智能手机等

常用mediafeature

max-width        输出设备中页面最大可视区域宽度 小于这个width时，其中的css起作用

max-height      输出设备中页面最大可视区域高度 小于这个height时，其中的css起作用

min-width        输出设备中页面最小可视区域宽度 大于这个width时，其中的css起作用
min-height      输出设备中页面最小可视区域高度 大于这个height时，其中的css起作用

 

html {
　　font-size:16px;
　　background-color:blue;
}
@media screen and (min-width: 401px){
    html {
        font-size: 25px !important;
        background-color: red;
    }
}
@media screen and (min-width: 428px){
    html {
        font-size: 26.75px !important;
        background: #000;
    }
}

解释：当媒体的

　　　　宽度在1px --- 401px 的时候，宽度包含401px这个值   背景色为 blue；

　　　　宽度为401px -- 428px 的时候  背景色为 red；

　　　　宽度大于 428px 的时候  背景色为 #000；

2，书写格式二

@media screen and (max-width:720px) and (min-width:320px){

      body{

       background-color:red;

       }

@media screen and (max-width:320px){

      body{

         background-color:blue;

       }

}

解释：该段媒体查询的意思是：当设备屏幕宽度在320px——720px之间时，媒体查询中body的背景色（background-color:red）会重叠之前的body背景色，当设备屏幕宽度在320px以下时，媒体查询中body的body背景色（

background-color:blue;）会重叠之前的body背景色

转载自：https://www.cnblogs.com/huijihuijidahuiji/p/c8a7cead1363283880bf88ddf3cc4931.html