全面分析CSS Media新闻媒体查寻应用实际操作(强

日期:2021-03-18 类型:科技新闻 

关键词:微信小程序商城,免费微信小程序,小程序设计软件,小程序生成平台,可查询的小程序

前面的话

  1说到回应式设计方案,毫无疑问离不开新闻媒体查寻media。1般觉得新闻媒体查寻是CSS3的新增內容,具体上CSS2早已存在了,CSS3新增了新闻媒体特性和应用情景(IE8-访问器不适用)。本文将详尽详细介绍新闻媒体查寻的內容

媒体种类

  在CSS2中,新闻媒体查寻只应用于<style>和<link>标识中,以media特性存在

  media特性用于为不一样的媒体种类要求不一样的款式

screen         测算机显示屏(默认设置值)   
tty            电传打字机和应用等宽标识符网格的相近媒体
tv             电视机种类机器设备(低辨别率、比较有限的显示屏滚翻工作能力)
projection     播映机
handheld       手持机器设备(小显示屏、比较有限的带宽)
print          复印预览方式 / 复印页
braille        视障用点字法意见反馈机器设备
aural          视频语音生成器
all            合适全部机器设备

  真实普遍应用且全部访问器都适配的媒体种类是'screen'和'all'

<style media="screen">
.box{height: 100px;width: 100px; background-color: lightblue;}    
</style>
<div class="box"></div> 

  新闻媒体特性

  新闻媒体特性是CSS3新增的內容,大部分新闻媒体特性带有“min-”和“max-”前缀,用于表述“小于等于”和“超过等于”。这防止了应用与HTML和XML矛盾的“<”和“>”标识符

  [留意]新闻媒体特性务必用括号()包起来,不然失效

  下表格中列出了全部的新闻媒体特性

     width | min-width | max-width
     height | min-height | max-height
     device-width | min-device-width | max-device-width
     device-height | min-device-height | max-device-height
     aspect-ratio | min-aspect-ratio | max-aspect-ratio
     device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
     color | min-color | max-color
     color-index | min-color-index | max-color-index
     monochrome | min-monochrome | max-monochrome
     resolution | min-resolution | max-resolution
     scan | grid

【1】色调(color)

  特定輸出机器设备每一个像素模块的比特值。假如机器设备不适用輸出色调,则该值为0

  向全部能显示信息色调的机器设备运用款式表

<style>
@media (color){
    .box{height: 100px;width: 100px;background-color: lightblue;}    
}    
</style>
<div class="box"></div>

【2】色调数据库索引(color-index)

  色调数据库索引特定了輸出机器设备中色调查寻表格中的条目数量,假如沒有应用色调查寻表,则值等于0

  向全部应用最少256个数据库索引色调的机器设备运用款式表(以下编码无显示信息,表明回到值为0)

<style>
@media (min-color-index: 256){
    .box{height: 100px; width: 100px;background-color: lightgreen;}    
}    
</style>    
<div class="box"></div>

【3】宽高比(aspect-ratio)

  宽高比叙述了輸出机器设备总体目标显示信息地区的宽高比。该值包括两个以“/”隔开的正整数金额。意味着了水平像素数(第1个值)与竖直像素数(第2个值)的占比

  向可视性地区是正方形或是宽屏的机器设备运用款式表

<style>
@media (min-aspect-ratio: 1/1) {
    .box{height: 100px;width: 100px; background-color: lightgreen; }        
}
</style>
<div class="box"></div>

【4】机器设备宽高比(device-aspect-ratio)

  机器设备宽高比叙述了輸出机器设备的宽高比。该值包括两个以“/”隔开的正整数金额。意味着了水平像素数(第1个值)与竖直像素数(第2个值)的占比

  向宽高比为16:9的独特宽屏机器设备运用款式表

<style>
@media (device-aspect-ratio:16/9) {
    .box{ height: 100px;width: 100px; background-color: pink;}        
}
</style>
<div class="box"></div>

【5】机器设备高宽比(device-height)

  机器设备高宽比叙述了輸出机器设备的高宽比

  向显示信息在最少高宽比1000px的显示屏上的文本文档运用款式表

<style>
@media (min-device-height: 1000px) {
    .box{ height: 100px;width: 100px; background-color: pink;}        
}
</style>
<div class="box"></div>

【6】机器设备宽度(device-width)

  机器设备宽度叙述了輸出机器设备的宽度

  向显示信息在最少宽度1000px的显示屏上的文本文档运用款式表

<style>
@media (min-device-width: 1000px) {
    .box{ height: 100px; width: 100px;background-color: lightblue; }        
}
</style>
<div class="box"></div>

【7】网格(grid)

  网格分辨輸出机器设备是网格机器设备還是位图机器设备。假如机器设备是根据网格的(比如电传打字机终端设备或只能显示信息1种字形的电話),该值为1,不然为0  

  向非网格机器设备运用款式表

<style>
@media (grid:0) {
    .box{height: 100px;width: 100px; background-color: lightgreen;}        
}
</style>
<div class="box"></div>

【8】高宽比(height)

  高宽比叙述了輸出机器设备3D渲染地区(如可视性地区的高宽比或复印机纸盒的高宽比)的高宽比

  向高宽比超过800px的可视性地区的机器设备运用款式表

<style>
@media (min-height:800px) {
    .box{ height: 100px; width: 100px;background-color: lightgreen; }        
}
</style>
<div class="box"></div>

【9】宽度(width)

  宽度叙述了輸出机器设备3D渲染地区的宽度

  向宽度超过800px的可视性地区的机器设备运用款式表

<style>
@media (min-width:800px) {
    .box{ height: 100px;width: 100px; background-color: lightgreen;}        
}
</style>
<div class="box"></div>

【10】黑与白(monochrome)

  黑与白特定了1个黑与白(灰度值)机器设备每一个像素的比特数。假如并不是黑与白机器设备,值为0

  向非黑与白机器设备运用款式表

<style>
@media (monochrome:0) {
    .box{height: 100px; width: 100px; background-color: lightgreen;}        
}
</style>
<div class="box"></div>

【11】方位(orientation)

  方位特定了机器设备处在横屏(宽度超过宽度)方式還是竖屏(高宽比超过宽度)方式

  值:landscape(横屏) | portrait(竖屏)

  向竖屏机器设备运用款式表

<style>
@media (orientation: portrait) {
    .box{height: 100px;width: 100px;background-color: lightgreen; }        
}
</style>
<div class="box"></div>

【12】辨别率(resolution)

  辨别率特定輸出机器设备的辨别率(像素密度)。辨别率能够用每英寸(dpi)或每厘米(dpcm)的点数来表明

  [留意]有关显示屏3要素(显示屏尺寸、辨别率、像素密度)的有关內容移步至此

  向每英寸最少90点的机器设备运用款式

<style>
@media (min-resolution: 90dpi) {
    .box{height: 100px;width: 100px; background-color: lightgreen; }        
}
</style>
<div class="box"></div>

【13】扫描仪(scan)

  扫描仪叙述了电视机輸出机器设备的扫描仪全过程

  值: progressive | interlace

英语的语法

  新闻媒体查寻包括了1个CSS2已有的媒体种类(或称为新闻媒体种类)和CSS3新增的包括1个或好几个表述式的新闻媒体特性,这些新闻媒体特性会被分析成真或假

  当新闻媒体查寻为真时,有关的款式表或款式标准就会依照一切正常的联级标准被运用。即便新闻媒体查寻回到假, <link> 标识上带有新闻媒体查寻的款式表仍将被免费下载(只但是不容易被运用)

<link rel="stylesheet" href="style.css" media="print">

<div class="box"></div> 

  media其实不是'print',因此新闻媒体查寻为假。可是,style.css文档仍然被免费下载

逻辑性实际操作符

  实际操作符not、and、only和逗号(,)能够用来搭建繁杂的新闻媒体查寻

and

  and实际操作符用来把好几个新闻媒体特性组成起来,合拼到同1条新闻媒体查寻中。仅有当每一个特性都为真时,这条查寻的結果才为真

  [留意]在不应用not或only实际操作符的状况下,新闻媒体种类是可选的,默认设置为all

  考虑横屏和最少宽度为700px的标准运用款式表

@media all and (min-width: 700px) and (orientation: landscape) { ... }

  因为不应用not或only实际操作符的状况下,新闻媒体种类是可选的,默认设置为 all,因此能够简写为

@media (min-width: 700px) and (orientation: landscape) { ... }

or

  将好几个新闻媒体查寻以逗号隔开放在1起;要是在其中任何1个为真,全部新闻媒体句子就回到真,非常于or实际操作符

  考虑最少宽度为700像素或是横屏的手持机器设备运用款式表

@media (min-width: 700px), handheld and (orientation: landscape) { ... }

not

  not实际操作符用来对1条新闻媒体查寻的結果开展取反

  [留意]not重要字仅能运用于全部查寻,而不可以独立运用于1个单独的查寻

@media not all and (monochrome) { ... }
//等额的于
@media not (all and (monochrome)) { ... }

only

  only实际操作符表明仅在新闻媒体查寻配对取得成功时运用特定款式。能够根据它让选定的款式在旧式访问器中不被运用

media="only screen and (max-width:1000px)"{...}

  上面这行编码,在旧式访问器中被分析为media="only",由于沒有1个叫only的机器设备,因此具体上旧式访问器不容易运用款式

media="screen and (max-width:1000px)"{...}

  上面这行编码,在旧式访问器中被分析为media="screen",它把后边的逻辑性表述式忽视了。因此旧式访问器会运用款式

  因此,在应用新闻媒体查寻时,only最好是不必忽视

方式

  window.matchMedia()方式用来查验CSS的mediaQuery句子

  [留意]IE9-访问器不适用,可使用第3方涵数库matchMedia.js

特性

  window.matchMedia()方式接纳1个mediaQuery句子的标识符串做为主要参数,回到1个MediaQueryList目标。该目标有media和matches两个特性

media:回到所查寻的mediaQuery句子标识符串
matches:回到1个布尔运算值,表明当今自然环境是不是配对查寻句子
var result = window.matchMedia('(min-width: 600px)');
console.log(result.media); //'(min-width: 600px)'
console.log(result.matches); // true

  能够依据matchMedia()方式的matches特性的不一样結果,开展对应的设定

var result = window.matchMedia('(min-width: 600px)');
if (result.matches) {
  //
}else{
 //
}

  [留意]假如window.matchMedia没法分析mediaQuery主要参数,matches特性回到的一直false,而并不是出错

var result = window.matchMedia('123');
console.log(result.matches);//false

恶性事件

  window.matchMedia方式回到的MediaQueryList目标有两个方式,用来监视恶性事件:addListener方式和removeListener方式

// 特定回调函数涵数
mql.addListener(mqCallback);
// 撤消回调函数涵数
mql.removeListener(mqCallback);

  留意,仅有mediaQuery查寻結果产生转变时,才启用特定的回调函数涵数

  因此,假如要想mediaQuery查寻未转变时,就显示信息相应实际效果,必须提早启用1次涵数

  下面这个事例是当网页页面宽度小于1000px时,网页页面情况色调为品鲜红色;不然为淡蓝色

var mql = window.matchMedia("(min-width: 1000px)");
mqCallback(mql);
mql.addListener(mqCallback);
function mqCallback(mql) {
  if (mql.matches) {
    document.body.background = 'pink';
  }else{
      document.body.background = 'lightblue';
  }
}

复印款式

  新闻媒体查寻的1个常见作用是复印款式的设定,关键是情况消除、字体样式色调变黑等

@media print{
    *,*:before,*:after{
        background:transparent!important;
        color:#000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    a,a:visited{
        text-decoration: underline;
    }
    a[href]:after{
        content:"(" attr(href) ")";
    }
    abbr[title]:after{
        content:"(" attr(title) ")";
    }
    a[href^="#"]:after,a[href^="javascript:;"]:after{
        content:"";
    }
    pre,blockquote{
        border: 1px solid #999;
        /*仅有opera访问器起功效,防止在元素內部插进分页查询符*/
        page-break-inside:avoid;
    }
    thead{
        display:table-header-group;
    }
    tr,img{
        page-break-inside:avoid;
    }
    img{
        max-width:100%!important;
    }
    p,h2,h3{
        /*元素內部产生分页查询时,至少保存3行*/
        orphans:3;
        /*元素內部产生分页查询时,元素顶部至少保存3行*/
        windows:3;
    }
    h2,h3{
        /*防止在元素后边插进1个分页查询符*/
        page-break-after:avoid;
    }
}

相对性企业

  假如新闻媒体查寻@media应用的是相对性企业,如rem,这里有1个坑必须侧重强调1下

  1般而言,rem是相对HTML的字体样式尺寸的。可是,因为新闻媒体查寻的级別十分高,它其实不是HTML的子元素,并不是相对HTML,而是相对访问器的,而访问器的默认设置字体样式尺寸是16px

  假如HTML设定字体样式尺寸为12px,设定以下新闻媒体查寻

media="only screen and (max-width:1rem)"

  具体上,max-width等于16px,而并不是12px

  而更是因为新闻媒体查寻是相对访问器的, 因此应用rem就沒有必要,彻底可使用em来取代

media="only screen and (max-width:1em)"

好了以上便是网编为大伙儿梳理的新闻媒体查寻的所有內容啦~期待大伙儿再次适用脚本制作之家~~~

上一篇:CSS3 background 返回下一篇:没有了