• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • @media

    版本:CSS3

    @media CSS @规则可用于基于一个或多个媒体查询的结果来应用样式表的一部分。使用它,您可以指定一个媒体查询和一个CSS块,当且仅当该媒体查询与正在使用其内容的设备匹配时,该CSS块才能应用于该文档。

    示例

    /* At the top level of your code */
    @media screen and (min-width: 900px) {
      article {
        padding: 1rem 3rem;
      }
    }
    
    /* Nested within another conditional at-rule */
    @supports (display: flex) {
      @media screen and (min-width: 900px) {
        article {
          display: flex;
        }
      }
    }
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    浏览器都支持@media

    语法

    @media<media-query-list>{<group-rule-body>}

    媒体特性

    媒体特性Media features)描述了 user agent、输出设备,或是浏览环境的具体特征。媒体特性表达式是完全可选的,它负责测试这些特性或特征是否存在、值为多少。每条媒体特性表达式都必须用括号括起来。

    名称简介备注
    any-hover是否有任何可用的输入机制允许用户(将鼠标等)悬停在元素上?在 Media Queries Level 4 中被添加。
    any-pointer可用的输入机制中是否有任何指针设备,如果有,它的精度如何?在 Media Queries Level 4 中被添加。
    aspect-ratio视窗(viewport)的宽高比
    color输出设备每个像素的比特值,常见的有 8、16、32 位。如果设备不支持输出彩色,则该值为 0
    color-gamut用户代理和输出设备大致程度上支持的色域在 Media Queries Level 4 中被添加。
    color-index输出设备的颜色查询表(color lookup table)中的条目数量,如果设备不使用颜色查询表,则该值为 0
    device-aspect-ratio输出设备的宽高比已在 Media Queries Level 4 中被弃用。
    device-height输出设备渲染表面(如屏幕)的高度已在 Media Queries Level 4 中被弃用。
    device-width输出设备渲染表面(如屏幕)的宽度已在 Media Queries Level 4 中被弃用。
    display-mode

    应用程序的显示模式,如web app的manifest中的display成员所指定

    在 Web App Manifest spec被定义.
    forced-colors检测是user agent否限制调色板在 Media Queries Level 5 中被添加。
    grid输出设备使用网格屏幕还是点阵屏幕?
    height视窗(viewport)的高度
    hover

    主要输入模式是否允许用户在元素上悬停

    在 Media Queries Level 4 中被添加。
    inverted-colorsuser agent或者底层操作系统是否反转了颜色在 Media Queries Level 5 中被添加。
    light-level环境光亮度在 Media Queries Level 5 中被添加。
    monochrome

    输出设备单色帧缓冲区中每个像素的位深度。如果设备并非黑白屏幕,则该值为 0

    orientation视窗(viewport)的旋转方向
    overflow-block

    输出设备如何处理沿块轴溢出视窗(viewport)的内容

    在 Media Queries Level 4 中被添加。
    overflow-inline

    沿内联轴溢出视窗(viewport)的内容是否可以滚动?

    在 Media Queries Level 4 中被添加。
    pointer

    主要输入机制是一个指针设备吗?如果是,它的精度如何?

    在 Media Queries Level 4 中被添加。
    prefers-color-scheme探测用户倾向于选择亮色还是暗色的配色方案在 Media Queries Level 5 中被添加。
    prefers-contrast探测用户是否有向系统要求提高或降低相近颜色之间的对比度在 Media Queries Level 5 中被添加。
    prefers-reduced-motion用户是否希望页面上出现更少的动态效果在 Media Queries Level 5 中被添加。
    prefers-reduced-transparency用户是否倾向于选择更低的透明度在 Media Queries Level 5 中被添加。
    resolution输出设备的像素密度(分辨率)
    scan输出设备的扫描过程(适用于电视等)
    scripting探测脚本(例如 JavaScript)是否可用在 Media Queries Level 5 中被添加。
    update输出设备更新内容的渲染结果的频率在 Media Queries Level 4 中被添加。
    width视窗(viewport)的宽度,包括纵向滚动条的宽度

    示例

    @media print {
      body { font-size: 10pt; }
    }
    
    @media screen {
      body { font-size: 13px; }
    }
    
    @media screen, print {
      body { line-height: 1.2; }
    }
    
    @media only screen 
      and (min-width: 320px) 
      and (max-width: 480px)
      and (resolution: 150dpi) {
        body { line-height: 1.4; }
    }
    

    媒体查询第4级引入了一种新的范围语法,在测试接受范围的任何特性时允许更简洁的媒体查询,如下面的示例所示:

    @media (height > 600px) {
        body { line-height: 1.4; }
    }
    
    @media (400px <= width <= 700px) {
        body { line-height: 1.4; }
    }
    

    更多示例,请查看使用媒体查询。

    可访问性

    为了最好地调整网站文本大小,当您需要 是用于表示距离尺寸的 CSS 数据类型。许多 CSS 属性会用到长度,比如 width、margin、padding、font-size、border-width 和 text-shadow。"><length>进行媒体查询时,请使用em

    empx都是有效单位,但如果用户更改浏览器文本大小,em的效果会更好。

    考虑使用4级媒体查询来改善用户体验。例如,使用prefers-reduced-motion以检测用户是否已请求系统最小化其使用的动画或动作量。

    安全

    由于媒体查询可以洞察用户正在使用的设备的功能(以及扩展的功能和设计),因此有可能滥用它们来构造“指纹”来识别设备,或者至少将其分类为某些细节,这可能是用户不希望看到的。

    由于存在这种潜力,浏览器可能会选择以某种方式捏造返回的值,以防止它们被用来精确地标识计算机。浏览器可能还会在此区域提供其他措施。例如,如果启用了Firefox的“抵抗指纹”设置,则许多媒体查询会报告默认值,而不是代表实际设备状态的值。

    上篇:@supports

    下篇:@keyframes