首页前端开发CSScss3中媒体查询的语法组成是什么

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

时间2024-01-27 22:22:03发布访客分类CSS浏览699
导读:收集整理的这篇文章主要介绍了css3中媒体查询的语法组成是什么,觉得挺不错的,现在分享给大家,也给大家做个参考。媒体查询的语法组成是“@media not|only mediatyPE and (exPressions {CSS代码......
收集整理的这篇文章主要介绍了css3中媒体查询的语法组成是什么,觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

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

  • viewport(视窗) 的宽度与高度

  • 设备的宽度与高度

  • 朝向 (智能手机的横屏,竖屏)

  • 分辨率

目前很多针对苹果手机,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中媒体查询的语法组成是什么的详细内容,更多请关注其它相关文章!

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!

css3

若转载请注明出处: css3中媒体查询的语法组成是什么
本文地址: https://pptw.com/jishu/588794.html
css清除浮动的方法有哪些 css能做什么

游客 回复需填写必要信息