今天小编跟大家讲解下有关CSS3及JS媒体查询教程 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS3及JS媒体查询教程 的相关资料，希望小伙伴们看了有所帮助。
css3媒体查询：语法：<media_query_list>：<media_query>[,<media_query>]<media_query>：only|not <mediaType> and <expression>[ and <expression>]<expression>：<mediaFeature>:<value>关键词“not”取补集 “only”不再推荐使用（not only都是可选的） “,”用法同css选择器中的逗号用法 [email protected] not|only mediaType and (mediaFeature) {CSS Codes;}或<link rel="stylesheet"media="not|only mediaType and (mediaFeature)"href="http://www.fly63.com/article/detial/402/mystylesheet.css">或<style type="text/css"media="not|only mediaType and (mediaFeature)">@import url("mystylesheet.css");</style>及：（这种可以在style标签里使用 也可以在一个css文件里使用）@media not|only mediaType and (mediaFeature){ 选择器{ 属性:属性值; }}媒体查询大部分都接受前缀min或max 表示大于等于或小于等于。（切记min和max对应的顺序 不要被表象所误导）and前后必须留空格 例如：（浏览器不产生任何效果）@media screen and(max-width:600px){ h2{ color:red }}媒体类型：（一些类型已从CSS3删除）all --用于所有设备print --用于打印机及打印预览screen --用于电脑、平板、手机屏幕（一般只用这个和all）speech --用于屏幕阅读器等发声设备媒体特性：width --页面可见区域的宽（一般只用这个和device-width）height --页面可见区域的高device-width --设备的屏幕可见区域宽device-height --设备的屏幕可见区域高aspect-ratio --设备的width与height的比device-aspect-ratio --设备的device-width与device-height的比resolution --设备的分辨率 如96dpi, 300dpi 118dpcmorientation --定义height是否大于或等于width 值portrait代表是 landscape代表否以上参数（除最后一个）均可以加max-或min-前缀。前四个参数比较常用 单位都是CSS的绝对单位 包括px em mm cm等。部分用法：@media screen and (orientation:portrait){ h2{ color:red; [email protected] screen and (max-aspect-ratio:4/3){ h2{ color:red; [email protected] screen and (min-resolution:96dpi){ h2{ color:red; }}全部参数详见：http://www.runoob.com/cssref/css3-pr-mediaquery.html常用的几种屏幕宽度设定：@media screen and (min-width:1200px) {css-code;[email protected] screen and(min-width:960px) and (max-width:1199px) {css-code;[email protected] screen and(min-width:768px) and (max-width:959px) {css-code;[email protected] screen and(min-width:480px) and (max-width:767px) {css-code;[email protected] screen and (max-width:479px) {css-code;}使用js动态查询媒体特征：window.matchMedia()方法接受一个media_query语句的字符串作为参数 返回一个MediaQueryList对象 该对象有media和matches两个属性。media：返回所查询的media_query语句字符串matches：返回一个布尔值 表示当前环境是否匹配查询语句注意：如果matchMedia无法解析media_query参数 matches属性返回的总是false 而不是报错例如：var result = window.matchMedia("screen (min-width: 600px)");console.log(result.media); //"(min-width: 600px)"console.log(result.matches); //truematchMedia方法返回的MediaQueryList对象有两个方法 用来监听事件：addListener和removeListenermql.addListener(mqCallback);mql.removeListener(mqCallback);注意 只有mediaQuery查询结果发生变化时 才调用指定的回调函数mqCallback 所以 如果想要mediaQuery查询未变化时 就显示相应效果 需要提前调用一次函数。下面这个例子是当页面宽度小于1000px时 页面背景颜色为品红色；否则为淡蓝色：var mql = window.matchMedia("(min-width: 1000px)");//mql = media query listfunction mqCallback(mql){if (mql.matches){document.body.background = 'pink';}else{document.body.background = 'lightblue';}}mqCallback(mql);mql.addListener(mqCallback);//注意 addListener触发条件是每次改变matches值时 只有true<->false才是叫做改变 true<->true或false<->false不算改变也不会触发addListener。来源：https://www.cnblogs.com/ryzz/archive/2018/01/27/8365160.html
来源：爱蒂网
