媒体查询移动优先与 PC 优先的区别与联系

媒体查询移动优先与 PC 优先的区别与联系

• 移动优先：从最小的屏幕开始媒体查询 ,有小到大
• pc优先：从大屏开始查询，由大屏到小屏
  二者在查询过程中都是逐步递进的

移动优先

    /*此项用以表示小于480px，屏幕的设置*/
     @media (max-width: 480px) {
        html {
          font-size: 10px;
        }
      }
      @media (min-width: 480px) {
        html {
          font-size: 12px;
        }
      }
      @media (min-width: 640px) {
        html {
          font-size: 14px;
        }
      }
      @media (min-width: 720px) {
        html {
          font-size: 16px;
        }
      }

pc优先

/* pc优先时，此项不可去，用以表示更大的屏幕的设置 */
      @media (min-width: 720px) {
        html {
          font-size: 18px;
        }
      }
      @media (max-width: 720px) {
        html {
          font-size: 16px;
        }
      }
      @media (max-width: 640px) {
        html {
          font-size: 14px;
        }
      }
      @media (max-width: 480px) {
        html {
          font-size: 12px;
        }
      }