/* 响应式布局     真正响应式布局,采用第三方 底层
 (小屏幕  中屏幕)               标准宽度屏幕                 (大屏幕   超大屏幕
   <1290px-1px)           >=50px+1190px+50px=1290px        >=100px+1490px+100px=>1690px
   0~calc(1290px-1px)     1290px~ calc(1690px – 1px)              1690px~
   版心宽990px                  1190px                             1490px*/

查询条件代码

/*@media:检测媒体介质
screen:检测当前的屏幕 
and 表示并且,注意两边必需有空格 ,后边跟上带一对小括号的条件
在()内写条件,在()后跟一对{},表示样式块
当条件满足时,执行{}内的样式块,条件不满足时忽略本{}的样式块
  */
/* 响应式布局     真正响应式布局,采用第三方 底层
 (小屏幕  中屏幕)               标准宽度屏幕                 (大屏幕   超大屏幕
   <1290px-1px)           >=50px+1190px+50px=1290px        >=100px+1490px+100px=>1690px
   0~calc(1290px-1px)     1290px~ calc(1690px - 1px)              1690px~
   版心宽990px                  1190px                             1490px*/
/*max-width最大值为1290px-1px*/
@media screen and ( max-width:calc(1290px - 1px)) {
   
}
/*最小值为1290px并且最大值为1500px-1px*/
@media screen and ( min-width:1290px) and (max-width:calc( 1500px - 1px)) {
    
}

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

添加对应条件的样式代码块

/* 当屏幕小于1290 就是1290px-1px小于就执行banxin990px宽度 */
/* min-width最小不能低于 */
@media screen and (max-width: calc(1290px - 1px)) {
  html {
    /* 30px左右间距,900px主体间距 */
    min-width: calc(30px + 900px 30px);
  }
  .banxin {
    width: 990px;
    background-color: red;
    margin-right: auto;
  }
}
/* 标准间距 */
@media screen and (min-width: 1290px) and (max-width: calc(1450px - 1px)) {
  html {
    min-width: calc(100px + 1090px +100px);
  }
  .banxin {
    width: 1090px;
    background-color: green;
  }
}

@media screen and (min-width: 1350px) {
  html {
    min-width: calc(100px + 1150px +100px);
  }
  .banxin {
    width: 1150px;
    background-color: blue;
  }
}

为版心添加测试文字 ::after用法

/*@media:检测媒体介质
screen:检测当前的屏幕 
and 表示并且,注意两边必需有空格 ,后边跟上带一对小括号的条件
在()内写条件,在()后跟一对{},表示样式块
当条件满足时,执行{}内的样式块,条件不满足时忽略本{}的样式块
  */

@media screen and ( max-width:calc(1290px - 1px)) {
    .banxin {
        width: 990px;
        /* 目测 */
        background-color: lightpink;
    }
/*wei标签。假标签*/
    .banxin::after {
        /* 类似 <span>xxxxxx 我是中和小屏幕<span> */
        content: "我是中和小屏幕 ";
        font-size: 30px;
    }
    html {
        /* 版心的外宽内窄转移到响应式布局中 */
        min-width: calc( 30px + 990px + 30px);
    }
}

@media screen and ( min-width:1290px) and (max-width:calc( 1500px - 1px)) {
    .banxin {
        width: 1190px;
        /* 目测 */
        background-color: lightseagreen;
    }
    .banxin::after {
        /* 类似 <span> 我是中和小屏幕<span> */
        content: "我是  标准 屏幕 ";
        font-size: 40px;
    }
    html {
        /* 版心的外宽内窄转移到响应式布局中 */
        min-width: calc( 50px + 1190px + 50px);
    }
}

@media screen and ( min-width:1500px) {
    .banxin {
        width: 1400px;
        /* 目测 */
        background-color: lightslategrey;
    }
    .banxin::after {
        /* 类似 <span> 我是中和小屏幕<span> */
        content: "我是  宽  和  超宽 屏幕 ";
        font-size: 50px;
    }
    html {
        /* 版心的外宽内窄转移到响应式布局中 */
        min-width: calc( 50px + 1400px + 50px);
    }
}