详解CSS3 Media Queries中新闻媒体特性的应用

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

关键词:抠图软件电脑版,在线图片加水印,在线 抠图,在线画图网站,淘宝做图片用什么软件好

新闻媒体特性
大多数数新闻媒体特性带有“min-”和“max-”前缀,用于表述“小于等于”和“超过等于”。这防止了应用与HTML和XML矛盾的“<”和“>”标识符。假如你未向新闻媒体特性特定1个值,而且该特点的具体值不为零,则该表述式被分析为真。

留意:假如访问器运作的机器设备上沒有该特性值,包括这个特性值的表述式1般回到假。比如,在视频语音生成器上查寻显示屏长宽比一直回到假。
色调(color)

值: <color>
新闻媒体: visual
是不是接纳 min/max 前缀:是

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

留意:假如每一个色调模块具备不一样数量的比特值,则应用最少的。比如,假如显示信息器为蓝色和鲜红色出示5比特,而为翠绿色出示6比特,则觉得每一个色调模块有5比特。假如机器设备应用数据库索引色调,则应用色调表格中色调模块的最少比特数。
示例

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

CSS Code拷贝內容到剪贴板
  1. @media all and (color) { ... }  

向每一个色调模块最少有4个比特的机器设备运用款式表:

CSS Code拷贝內容到剪贴板
  1. @media all and (min-color: 4) { ... }  

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

值:<integer>
新闻媒体: visual
是不是接纳 min/max 前缀:是

特定了輸出机器设备中色调查寻表格中的条目数量。

示例

向全部应用数据库索引色调的机器设备运用款式表,你能够这么做:

CSS Code拷贝內容到剪贴板
  1. @media all and (color-index) { ... }  

向全部应用最少256个数据库索引色调的机器设备运用款式表:

CSS Code拷贝內容到剪贴板
  1. <link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" />  

宽高比(aspect-ratio)

值:<ratio>
新闻媒体: visual, tactile
是不是接纳 min/max 前缀:是

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

示例

下面为显示信息地区宽高最少为1比1的机器设备挑选了1个独特的款式表。

CSS Code拷贝內容到剪贴板
  1. @media screen and (min-aspect-ratio: 1/1) { ... }  

这特定了宽高比或1:1或更大。换句话说,可视性地区或是正方形或是宽屏。

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

值:<ratio>
新闻媒体:visual, tactile
是不是接纳 min/max 前缀:是

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

示例

下面为宽屏机器设备挑选了1个独特的款式表。

CSS Code拷贝內容到剪贴板
  1. @media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }  

宽高比或16:9或16:10。

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

值:<length>
新闻媒体:visual, tactile
是不是接纳 min/max 前缀:是

叙述了輸出机器设备的高宽比(全部显示屏或页的高宽比,而并不是仅仅像文本文档对话框1样的3D渲染地区)。

示例

向显示信息在最大宽度800px的显示屏上的文本文档运用款式表,你能够这样做:

CSS Code拷贝內容到剪贴板
  1. <link rel="stylesheet" media="screen and (max-device-width: 799px)" />  

机器设备宽度(device-width)

值:<length>
新闻媒体: visual, tactile
是不是接纳 min/max 前缀:是

叙述了輸出机器设备的宽度(全部显示屏或页的高宽比,而并不是仅仅像文本文档对话框1样的3D渲染地区)。

网格(grid)

值:<integer>
新闻媒体:all
是不是接纳 min/max 前缀: 否

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

示例

向1个15标识符宽度或更窄的手持机器设备运用款式:

CSS Code拷贝內容到剪贴板
  1. @media handheld and (grid) and (max-width: 15em) { ... }  

留意:“em” 在网格机器设备中有不一样的实际意义;1个“em”的具体宽度不可而知,假定1em非常于1个网格模块的宽高。
高宽比(height)

值:<length>
新闻媒体:visual, tactile
是不是接纳 min/max 前缀:是

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

留意:客户调剂对话框尺寸后,火狐访问器会依据应用了width和height特性的新闻媒体查寻来切换适合的款式表。
黑与白(monochrome)

值:<integer>
新闻媒体: visual
是不是接纳 min/max 前缀:是

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

示例

向全部黑与白机器设备运用款式表:

CSS Code拷贝內容到剪贴板
  1. @media all and (monochrome) { ... }  

向每一个像素最少8比特的黑与白机器设备运用款式表:

CSS Code拷贝內容到剪贴板
  1. @media all and (min-monochrome: 8) { ... }  

方位(orientation)

值:landscape | portrait
新闻媒体:visual
是不是接纳 min/max 前缀:否

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

示例

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

CSS Code拷贝內容到剪贴板
  1. @media all and (orientation: portrait) { ... }  

辨别率(resolution)

值: <resolution>
新闻媒体: bitmap
是不是接纳 min/max 前缀:是

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

示例

为每英寸最多300点的复印机运用款式:

CSS Code拷贝內容到剪贴板
  1. @media print and (min-resolution: 300dpi) { ... }  

更换年久的 (min-device-pixel-ratio: 2) 英语的语法:

CSS Code拷贝內容到剪贴板
  1. @media screen and (min-resolution: 2dppx) { ... }  

扫描仪(scan)

值: progressive | interlace
新闻媒体:tv
是不是接纳 min/max 前缀:否

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

示例

向以次序方法扫描仪的电视机机上运用款式表:

CSS Code拷贝內容到剪贴板
  1. @media tv and (scan: progressive) { ... }  

宽度(width)

值: <length>
新闻媒体: visual, tactile
是不是接纳 min/max 前缀:是

width 新闻媒体特性叙述了輸出机器设备3D渲染地区(如可视性地区的宽度或复印机纸盒的宽度)的宽度。

留意:客户调剂对话框尺寸后,火狐访问器会依据应用了width和height特性的新闻媒体查寻来切换适合的款式表。
示例

假如你想向最少宽度20em的手持机器设备或显示屏运用款式表,你可使用这样的查寻:

CSS Code拷贝內容到剪贴板
  1. @media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }  

这个新闻媒体查寻将向最少宽度8.5英寸的复印机运用款式表:

CSS Code拷贝內容到剪贴板
  1. <link rel="stylesheet" media="print and (min-width: 8.5in)"  
  2.     href="http://foo.com/mystyle.css" />  

这个查寻可用于宽度在500px和800px之间的显示屏:

CSS Code拷贝內容到剪贴板
  1. @media screen and (min-width500px) and (max-width800px) { ... }  


完成回应式设计方案

这个事例能够调剂你的访问器对话框规格,大家来实际看1下:
Max Width
下面的款式会在可视性地区的宽度小于 600px 的情况下被运用。

CSS Code拷贝內容到剪贴板
  1. @media screen and (max-width600px) {   
  2.   .class {   
  3.     background#ccc;   
  4.   }   
  5. }  

假如你想连接到1个独立的款式表,把下面的编码放在<head>标识里。

CSS Code拷贝內容到剪贴板
  1. <link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />  

Min Width
下面的款式会在可视性地区的宽度超过 900px 的情况下被运用。

CSS Code拷贝內容到剪贴板
  1. @media screen and (min-width900px) {   
  2.   .class {   
  3.     background#666;   
  4.   }   
  5. }  

Multiple Media Queries
你还能够应用过个配对标准,下面的款式会在可视性地区的宽度在 600px 和 900px 之间的情况下被运用。

CSS Code拷贝內容到剪贴板
  1. @media screen and (min-width600px) and (max-width900px) {   
  2.   .class {   
  3.     background#333;   
  4.   }   
  5. }  

Device Width
下面的款式会在 max-device-width 是 480px 的机器设备上开启。(提醒:max-device-width 是机器设备的具体辨别率,而 max-width 指的是可视性地区辨别率。)

CSS Code拷贝內容到剪贴板
  1. @media screen and (max-device-width480px) {   
  2.   .class {   
  3.     background#000;   
  4.   }   
  5. }   

For iPhone 4
下面的款式是为 iPhone 4 专业写的 (作者: Thomas Maier)。

CSS Code拷贝內容到剪贴板
  1. <link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />   

For iPad
你还能够应用 media query 在 iPad 上检验方位(portrait or landscapse) 

CSS Code拷贝內容到剪贴板

  1. <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">   
  2. <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">