• 技术文章 >web前端 >css教程

    css3中媒体查询的语法组成是什么

    青灯夜游青灯夜游2021-04-06 18:42:58原创96

    媒体查询的语法组成是“@media not|only mediatype and (expressions) {CSS代码...;}”;媒体查询可由多种媒体组成,可以包含一个或多个表达式,表达式根据条件是否成立返回true或false。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想: 取代了查找设备的类型,CSS3 根据设置自适应显示。

    媒体查询可用于检测很多事情,例如:

    目前很多针对苹果手机,Android 手机,平板等设备都会使用到多媒体查询。

    查询语法

    @media not|only mediatype and (expressions) {
        CSS 代码...;
     }

    多媒体查询由多种媒体组成,可以包含一个或多个表达式,表达式根据条件是否成立返回 true 或 false。

    媒体类型

    如果指定的多媒体类型匹配设备类型则查询结果返回 true,文档会在匹配的设备上显示指定样式效果。

    除非使用了 not 或 only 操作符,否则所有的样式会适应在所有设备上显示效果。

    描述
    all用于所有媒体设备
    print用于打印机
    screen用于电脑屏幕,平板,智能手机等
    speech用于屏幕阅读器

    媒体功能

    描述
    aspect-ratio定义输出设备中的页面可见区域宽度与高度的比率
    color定义输出设备每一组彩色原件的个数。如果不是彩色设备,则值等于0
    color-index定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表,则值等于0
    device-aspect-ratio定义输出设备的屏幕可见宽度与高度的比率。
    device-height定义输出设备的屏幕可见高度。
    device-width定义输出设备的屏幕可见宽度。
    height定义输出设备中的页面可见区域高度。
    max-aspect-ratio定义输出设备的屏幕可见宽度与高度的最大比率。
    max-color定义输出设备每一组彩色原件的最大个数。
    max-color-index定义在输出设备的彩色查询表中的最大条目数。
    max-device-aspect-ratio定义输出设备的屏幕可见宽度与高度的最大比率。
    max-device-height定义输出设备的屏幕可见的最大高度。
    max-device-width定义输出设备的屏幕最大可见宽度。
    max-height定义输出设备中的页面最大可见区域高度。
    max-resolution定义设备的最大分辨率。
    max-width定义输出设备中的页面最大可见区域宽度。
    min-device-width定义输出设备的屏幕最小可见宽度。
    min-device-height定义输出设备的屏幕的最小可见高度。
    min-height定义输出设备中的页面最小可见区域高度。
    min-width定义输出设备中的页面最小可见区域宽度。
    orientation定义输出设备中的页面可见区域高度是否大于或等于宽度。
    resolution定义设备的分辨率。如:96dpi, 300dpi, 118dpcm
    width定义输出设备中的页面可见区域宽度。

    举个例子
    屏幕宽度大于480px,字体的大小设置为16px。

    @media screen and (min-width: 480px) {
        body {
           font-size:16px;
        }
    }

    (学习视频分享:css视频教程

    以上就是css3中媒体查询的语法组成是什么的详细内容,更多请关注php中文网其它相关文章!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:css3 媒体查询
    上一篇:css怎样清除浮动 下一篇:CSS如何设置字体粗细
    第15期线上培训班

    相关文章推荐

    • css与css3的区别是什么• 详解CSS3+SVG滤镜实现不规则边框的方法• css3中新增加的颜色模式有哪些• 使用css3中的什么规则来定义动画• css3支持为网页添加多个背景图片吗

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网