CSS3媒体查询代码怎么写

这篇文章主要介绍“CSS3媒体查询代码怎么写”，在日常操作中，相信很多人在CSS3媒体查询代码怎么写问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS3媒体查询代码怎么写”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
　　CSS3媒体查询：
　　语法：
　　：[,]
　　：only|not and [ and ]
　　：:
　　关键词“not”取补集，“only”不再推荐使用（not，only都是可选的），“，”用法同CSS选择器中的逗号用法，表示一种合写。
　　@media not|only mediaType and （mediaFeature） {
　　CSS Codes;
　　}
　　或
　　 　　或
　　

　　@import url（”mystylesheet.css”）;
　　
　　及：（这种可以在style标签里使用，也可以在一个css文件里使用）
　　@media not|only mediaType and （mediaFeature）{
　　选择器{
　　属性：属性值;
　　}
　　}
　　媒体查询大部分都接受前缀min或max，表示大于等于或小于等于。（切记min和max对应的顺序免费云主机域名，不要被表象所误导）
　　and前后必须留空格，例如：（浏览器不产生任何效果）
　　@media screen and（max-width:600px）{
　　h3{
　　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，118dpcm
　　orientation –定义height是否大于或等于width，值portrait代表是，landscape代表否
　　以上参数（除最后一个）均可以加max-或min-前缀。
　　前四个参数比较常用，单位都是CSS的绝对单位，包括px em mm cm等。
　　部分用法：
　　@media screen and （orientation:portrait）{
　　h3{
　　color:red;
　　}
　　}
　　@media screen and （max-aspect-ratio:4/3）{
　　h3{
　　color:red;
　　}
　　}
　　@media screen and （min-resolution:96dpi）{
　　h3{
　　color:red;
　　}
　　}
　　全部参数详见：
　　常用的几种屏幕宽度设定：
　　@media screen and （min-width:1200px） {
　　css-code;
　　}
　　@media screen and（min-width:960px） and （max-width:1199px） {
　　css-code;
　　}
　　@media screen and（min-width:768px） and （max-width:959px） {
　　css-code;
　　}
　　@media screen and（min-width:480px） and （max-width:767px） {
　　css-code;
　　}
　　@media 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）; //true
　　matchMedia方法返回的MediaQueryList对象有两个方法，用来监听事件：addListener和removeListener
　　mql.addListener（mqCallback）;
　　mql.removeListener（mqCallback）;
　　注意，只有mediaQuery查询结果发生变化时，才调用指定的回调函数mqCallback，所以，如果想要mediaQuery查询未变化时，就显示相应效果，需要提前调用一次函数。
　　下面这个例子是当页面宽度小于1000px时，页面背景颜色为品红色；否则为淡蓝色：
　　var mql=window.matchMedia（”（min-width: 1000px）”）;//mql=media query list
　　function mqCallback（mql）{
　　if （mql.matches）{
　　document.body.background=’pink’;
　　}else{
　　document.body.background=’lightblue’;
　　}
　　}
　　mqCallback（mql）;
　　mql.addListener（mqCallback）;
　　//注意，addListener触发条件是每次改变matches值时，只有truefalse才是叫做改变，truetrue或falsefalse不算改变也不会触发addListener。到此，关于“CSS3媒体查询代码怎么写”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注百云主机网站，小编会继续努力为大家带来更多实用的文章！

相关推荐: css的样式属性是什么意思

这篇文章将为大家详细讲解有关css的样式属性是什么意思，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。 　　简介 　　层叠样式表(英文全称：CascadingStyleSheets)是一种用来表现HTML（标准通用标记语言的一…