温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

CSS3媒体查询代码怎么写

发布时间:2022-03-05 16:28:05 来源:亿速云 阅读:107 作者:iii 栏目:web开发

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

  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选择器中的逗号用法,表示一种合写。

  @media not|only mediaType and (mediaFeature) {

  CSS Codes;

  }

  或

  <link rel="stylesheet" media="not|only mediaType and (mediaFeature)" href="">

  或

  <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){

  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媒体查询代码怎么写”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI