语法: @media 媒体类型 逻辑操作符 (媒体属性) ｛样式代码｝

逻辑操作符

  1. and：
    • 操作符用来把多个媒体属性组合起来，合并到同⼀条媒体查询中；
    • 只有当每个属性都为真时，这条查询的结果才为真；
    • @media all and （min-width:700px）and （orientation: lanscape）{...}
  2. not：
    • 操作符用来对⼀条媒体查询的结果进行取反；
    • @media not all and （monochrome){...} <=> not (all and (monochrome)){...}
  3. only：
    • 操作符表示仅在媒体查询匹配成功时应用指定样式；
    • 可以通过它让选中的样式在老式浏览器中不被应用；
    • media = "only screen and（max-width：1000px)" {...}

媒体属性

  1. width | min-width | max-width
  2. height | min-height | max-height
  3. device-width | min-device-width | max-device-width
  4. device-height | min-device-height | max-device-height
  5. aspect-ratio | min-aspect-ratio | max-aspect-ratio
  6. device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
  7. color | min-color | max-color
  8. color-index | min-color-index | max-color-index
  9. monochrome | min-monochrome | max-monochrome
  10. resolution | min-resolution | max-resolution
  11. scan | grid

案例

  1. 不同设备布局不同
    • 示例代码
      <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>媒体查询@media</title>
  <style>
    /*
    *原理:  
    * 同时pc + 手机结构都在一套html写好
    * pc  header 显示  手机 header 隐藏
    * pc  icon隐藏  手机 icon 显示 
    */
    .header {
      width: 1200px;
      margin: 0 auto
      background: red;            
    }
    .touchHeader {
      display: none;
    }

    /* 媒体查询: 重要 - 每个关键词之间需要用一个空格隔开
    * 1.@media 媒介
    * 2.媒介类型  screen设备  TV 电视  print 打印机.....
    * 3.连接符  and   not  only
    * 4.判断条件() 小括号   max-width/min-width/max-height/min-height
    * 5.花括号{ css代码块 }
    * 媒体查询 -  有条件的代码权重的覆盖
    */
    @media screen and (max-width:480px) {
      .header {
          display: none;
      }
      .touchHeader {
          display: block;
          background: yellow;
      }
    }
  </style>
</head>
<body>
  <div class="header">header</div>
  <div class="touchHeader">body</div>
</body>
</html>
    • 效果展示
  2. 横屏和竖屏
    • 示例代码
      <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 手机宣传页 上下滑屏特效  screen and  省略不写*/
    html {
      background-color: gold;
    }
    /* 竖屏*/
    @media screen and (orientation: portrait) {
      .tip {
          display: none;
      }
    }
    /* 横屏 */
    @media (orientation: landscape) {
      .tip {
          display: block;
          font-size: 50px;
          text-align: center;
      }
    }
  </style>
</head>
<body>
  <!-- 提示 -->
  <div class="tip">请把手机转到竖屏的状态！</div>
</body>
</html>
    • 效果展示
打赏作者
您的打赏是我前进的动力
微信
支付宝
评论

中午好👏🏻，我是 ✍🏻   疯狂 codding 中...

粽子

这有关于产品、设计、开发的问题和看法，还有技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程

了解更多

目录

  1. 1. 语法: @media 媒体类型 逻辑操作符 (媒体属性) ｛样式代码｝
  2. 2. 逻辑操作符
  3. 3. 媒体属性
  4. 4. 案例