189 8069 5689

CSS3媒体查询代码怎么写

这篇文章主要介绍“CSS3媒体查询代码怎么写”,在日常操作中,相信很多人在CSS3媒体查询代码怎么写问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”CSS3媒体查询代码怎么写”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

三门网站制作公司哪家好,找创新互联公司!从网页设计、网站建设、微信开发、APP开发、响应式网站建设等网站项目制作,到程序开发,运营维护。创新互联公司2013年至今到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联公司

CSS3媒体查询:

语法:

[,]

:only|not and [ and ]

:

关键词“not”取补集,“only”不再推荐使用(not,only都是可选的),“,”用法同CSS选择器中的逗号用法,表示一种合写。

@media not|only mediaType and (mediaFeature) {

CSS Codes;

}

及:(这种可以在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值时,只有true<->false才是叫做改变,true<->true或false<->false不算改变也不会触发addListener。

到此,关于“CSS3媒体查询代码怎么写”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


当前题目:CSS3媒体查询代码怎么写
标题路径:http://cdxtjz.com/article/jcsico.html

其他资讯