1. 首页>>前端>>CSS

多媒体查询max-width规则

  多媒体查询:

  一般是可以由:max-width: 1200px  //当尺寸小于1200的时候   以这个方式就需要由大到小的去写规则

  例子:

  h1 {
  text-align: center;
  }
  .two_ct {
  color: black;
  }
  css:
  /* 当小于1200px的时候用这条规则. */
  @media all and (max-width: 1200px){
  h1 {
  text-align:left;
  background-color: #ed1414;
  }
  .two_ct{
  color:red;
  }
  }
  @media all and (max-width: 1024px){
  h1 {
  text-align:left;
  background-color: #eda014;
  }
  .two_ct{
  color:#e400ff;
  }
  }
  @media all and (max-width: 768px){
  h1 {
  text-align:left;
  background-color: #ede614;
  }
  .two_ct{
  color:#1000ff;
  }
  }
  @media all and (max-width: 425px){
  h1 {
  text-align:left;
  background-color: #5ded14;
  }
  .two_ct{
  color:#015b64;
  }
  }
  @media all and (max-width: 375px){
  h1 {
  text-align:left;
  background-color: #14edb1;
  }
  }


转载联系作者并注明出处:https://focusonseo.cn/css/83.html