实例演示媒体查询(移动优先)

媒体查询

1. 1.媒体：信息载体、如屏幕、手机、打印机…
2. 2.查询：根据媒体宽度确认展示方式及内容
3. 3.指令：@media，默认screen即屏幕
4. 4.属性：max-width，min-width
5. 5.操作符：and，not，only
6. 6书写顺序约定
   • 1.移动端优先：从小到大
   • 2.pc端优先：从大到小

/* 以移动端有限为例子 */
      @media (max-width: 375px) {
        /* 屏幕宽度小于375 */
        /* 则调用这里的内容 */
      }
      @media (min-width: 375px) and (max-width: 640px) {
        /* 屏幕大于375小于640则调用这里的内容 */
      }
      @media (min-width: 640px) {
        /* 屏幕大于640则调用这里的内容 */
      }

一个简单的例子

这样在我们浏览器宽度发生变化的时候，我们的按钮也会相应的发生变化。

<button>登录</button>
    <style>
      /* 以移动端有限为例子 */
      .html {
        font-size: 0.625rem;
      }
      @media (max-width: 375px) {
        button {
          width: 45px;
        }
      }
      @media (min-width: 375px) and (max-width: 640px) {
        button {
          width: 65px;
        }
      }
      @media (min-width: 640px) {
        button {
          width: 85px;
        }
      }
    </style>