CSS3及JS媒体查询教程

更新日期: 2018-01-27阅读: 2.6k标签: 媒体查询
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="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,118dpcm
orientation          --定义height是否大于或等于width,值portrait代表是,landscape代表否
以上参数(除最后一个)均可以加max-或min-前缀。
前四个参数比较常用,单位都是CSS的绝对单位,包括px em mm cm等。


部分用法:
@media screen and (orientation:portrait){
    h2{
        color:red;
        /*
        页面的高>=宽,h2变红
        一般用于检测设备处于横向还是纵向,portrait竖屏
        */
    }
}
@media screen and (max-aspect-ratio:4/3){
    h2{
        color:red;
        /*
        页面的宽比高<=4比3,h2变红
        不加max或min前缀表示绝对等于,比如aspect-ratio:4/3表示只有宽比高是4/3时候才执行css代码,对于width这样之类的属性同理
        */
    }
}
@media screen and (min-resolution:96dpi){
    h2{
        color:red;
        /*
        设备屏幕分辨率>=96dpi,h2变红
        你也可以用118dpcm这样的单位
        */
    }
}
全部参数详见:http://www.runoob.com/cssref/css3-pr-mediaquery.html

常用的几种屏幕宽度设定:
@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。

来源:https://www.cnblogs.com/ryzz/archive/2018/01/27/8365160.html

链接: https://www.fly63.com/article/detial/402

CSS3 @media媒体查询

@media 媒体查询选择性加载css,意思是自动探测屏幕宽度,然后加载相应的CSS文件。可以针对不同的屏幕尺寸设置不同的样式,特别是需要设置设计响应式的页面,@media 是个不错的选择

前端css3媒体查询

媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color (等)

css媒体查询与响应式

根据一个或多个基于设备类型、具体特点和环境的媒体查询来应用样式。简单来说就是针对不同的媒体类型(比如屏幕、打印机或者屏幕阅读器)定义不同的样式,可以针对不同的屏幕尺寸设置不同的样式

@media screen媒体查询

一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成,例如宽度、高度和颜色。媒体查询,添加自CSS3,允许内容的呈现针对一个特定范围的输出设备而进行裁剪,而不必改变内容本身。

Css媒体查询以及常用设置

页面为了适应各种设备(PC端、移动端的不同设备)的不同显示情况,增加了媒体查询的功能,通过特定的要求达到不同的样式显示。媒体查询通常用来区别于屏幕宽度大小

超越媒体查询:使用更新的HTML和CSS功能进行响应式设计

除了使用媒体查询和现代CSS布局(如flexbox和grid)来创建响应式网站外,我们还可以做好某些被忽视的事情来制作响应式网站。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!