zoukankan      html  css  js  c++  java
  • 媒体查询的条件判断顺序

    媒体查询的细节--重点理解和掌握:(判断最小值,并且从小到大进行判断.如果是判断最大值,就应该从大到小写)
    1.向上兼容:在窄屏设置的样式。默认在大屏也会存在;
    2.向下覆盖:宽屏的样式设置会覆盖窄屏的样式设置;
    书写建议:

    1、如果判断最小值(min-width),那么就应该从小到大写;

    body{
        background: #f00;
    }
    @media screen and (min- 900px){
        body{
        background: pink;
    }
    }
    @media screen and (min- 1100px){
        body{
        background: gray;
    }
    }
    @media screen and (min- 1200px){
        body{
        background: purple;
    }
    }

    2、如果判断最大值(max-width),那么就应该从大到小写;

    body{
        background: #e4393c;
    }
    @media screen and (max- 1200px){
        body{
           background: lightblue;
      }
    }
    @media screen and (max- 1100px){
      body{
         background: gray;
      }
    }
    @media screen and (max- 900px){
      body{
         background: purple;
      }
    }
  • 相关阅读:
    Placing Rooks-CF 1342E
    Yet Another Counting Problem-CF 1342C
    [SDOI2016]齿轮
    Rinne Loves Xor
    Labyrinth CodeForces
    Nastya and Scoreboard
    Teacher Bo HDU
    Blood Cousins Return
    D Tree HDU
    设计模式学习笔记(八、行为型-策略模式)
  • 原文地址:https://www.cnblogs.com/lisen203/p/10496493.html
Copyright © 2011-2022 走看看