zoukankan      html  css  js  c++  java
  • CSS媒体查询总结

    1媒体查询概念

    一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能限制样式表范围的表达式组成, 例如 宽度,高度和颜色。在CSS3中添加的媒体查询,允许内容的呈现针对一个特定范围的输出设备而定制,而不必改变内容本身。

    2媒体查询的两种引入方式

    <!-- link元素中的CSS媒体查询 -->
    <link rel="stylesheet" media="(max- 800px)" href="example.css" />
    
    <!-- 样式表中的CSS媒体查询 -->
    <style>
    @media (max- 600px) {
      .facet_sidebar {
        display: none;
      }
    }
    </style>
    

    3逻辑操作符

    可以使用 not,and 和 only 等逻辑操作符构建复杂的媒体查询。and 操作符用来把多个 媒体属性 组合成一条媒体查询。只有当每个属性都为真时,结果才为真。not操作符用来对一条媒体查询的结果进行取反。only 操作符表示仅在媒体查询匹配成功的情况下应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用。若使用了 not 或 only 操作符,必须明确指定一个媒体类型。

    and

    and 关键字用于合并多个媒体属性或合并媒体属性与媒体类型。一个基本的媒体查询,即一个媒体属性与默认指定的 all媒体类型,可能像这样子:

    @media (min-width: 700px) { ... }

    如果你只想在横屏时应用这个,你可以使用 and 操作符合并媒体属性:

    (min- 700px) and (orientation: landscape) { ... }


    or

    媒体查询中使用逗号分隔效果等同于 or 逻辑操作符。

    例如,如果你想在最小宽度为700像素或是横屏的手持设备上应用一组样式,你可以这样写:

    @media (min-width: 700px), handheld and (orientation: landscape) { ... }

    not

    not 关键字应用于整个媒体查询,在媒体查询为假时返回真 (比如 monochrome 应用于彩色显示设备上或一个600像素的屏幕应用于 min- 700px 属性查询上 )。在逗号媒体查询列表中 not 仅会否定它应用到的媒体查询上而不影响其它的媒体查询。 not 关键字仅能应用于整个查询,而不能单独应用于一个独立的查询。例如,not 在下面的查询中最后被计算:

    @media not all and (monochrome) { ... }
     
  • 相关阅读:
    Oracle DBMS_PROFILER 的使用方式 (转)
    2010-09-01 22:29 oracle建表、建主键、外键基本语法
    Oracle11g对AWR的扩展
    Oracle中各个命中率的总结及调优笔记整理
    如何用 SQL Tuning Advisor (STA) 优化SQL语句
    aix分配硬盘
    AIX tar命令
    linux gzip命令参数及用法详解--linux压缩gzip文件命令
    AIX6.1下配置Nmon性能工具
    qqq
  • 原文地址:https://www.cnblogs.com/wu-hou/p/7001075.html
Copyright © 2011-2022 走看看