CSS Media媒体查询使用大全,完整媒体查询总结

本文转载自:https://www.cnblogs.com/lguow/p/9316598.html(感谢分享)
前面的话

  一说到响应式设计,肯定离不开媒体查询media。一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了媒体属性和使用场景(IE8-浏览器不支持)。本文将详细介绍媒体查询的内容

媒介类型

  在CSS2中,媒体查询只使用于和标签中,以media属性存在

  media属性用于为不同的媒介类型规定不同的样式

screen 计算机屏幕(默认值)
tty 电传打字机以及使用等宽字符网格的类似媒介
tv 电视类型设备(低分辨率、有限的屏幕翻滚能力)
projection 放映机
handheld 手持设备(小屏幕、有限的带宽)
print 打印预览模式 / 打印页
braille 盲人用点字法反馈设备
aural 语音合成器
all 适合所有设备

  真正广泛使用且所有浏览器都兼容的媒介类型是’screen’和’all’


.box{height: 100px;width: 100px; background-color: lightblue;}

媒体属性

  媒体属性是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

  向所有能显示颜色的设备应用样式表

复制代码

@media (color){
.box{height: 100px;width: 100px;background-color: lightblue;}
}

复制代码
【2】颜色索引(color-index)

  颜色索引指定了输出设备中颜色查询表中的条目数量,如果没有使用颜色查询表,则值等于0

  向所有使用至少256个索引颜色的设备应用样式表(下列代码无显示,说明返回值为0)

复制代码

@media (min-color-index: 256){
.box{height: 100px; width: 100px;background-color: lightgreen;}
}

复制代码
【3】宽高比(aspect-ratio)

  宽高比描述了输出设备目标显示区域的宽高比。该值包含两个以“/”分隔的正整数。代表了水平像素数(第一个值)与垂直像素数(第二个值)的比例

  向可视区域是正方形或者是宽屏的设备应用样式表

复制代码

@media (min-aspect-ratio: 1/1) {
.box{height: 100px;width: 100px; background-color: lightgreen; }
}

复制代码
【4】设备宽高比(device-aspect-ratio)

  设备宽高比描述了输出设备的宽高比。该值包含两个以“/”分隔的正整数。代表了水平像素数(第一个值)与垂直像素数(第二个值)的比例

  向宽高比为16:9的特殊宽屏设备应用样式表

复制代码

@media (device-aspect-ratio:16/9) {
.box{ height: 100px;width: 100px; background-color: pink;}
}

复制代码
【5】设备高度(device-height)

  设备高度描述了输出设备的高度

  向显示在最小高度1000px的屏幕上的文档应用样式表

复制代码

@media (min-device-height: 1000px) {
.box{ height: 100px;width: 100px; background-color: pink;}
}

复制代码
【6】设备宽度(device-width)

  设备宽度描述了输出设备的宽度

  向显示在最小宽度1000px的屏幕上的文档应用样式表

复制代码

@media (min-device-width: 1000px) {
.box{ height: 100px; width: 100px;background-color: lightblue; }
}

复制代码
【7】网格(grid)

  网格判断输出设备是网格设备还是位图设备。如果设备是基于网格的(例如电传打字机终端或只能显示一种字形的电话),该值为1,否则为0  

  向非网格设备应用样式表

复制代码

@media (grid:0) {
.box{height: 100px;width: 100px; background-color: lightgreen;}
}

复制代码
【8】高度(height)

  高度描述了输出设备渲染区域(如可视区域的高度或打印机纸盒的高度)的高度

  向高度大于800px的可视区域的设备应用样式表

复制代码

@media (min-height:800px) {
.box{ height: 100px; width: 100px;background-color: lightgreen; }
}

复制代码
【9】宽度(width)

  宽度描述了输出设备渲染区域的宽度

  向宽度大于800px的可视区域的设备应用样式表

复制代码

@media (min-width:800px) {
.box{ height: 100px;width: 100px; background-color: lightgreen;}
}

复制代码
【10】黑白(monochrome)

  黑白指定了一个黑白(灰度)设备每个像素的比特数。如果不是黑白设备,值为0

  向非黑白设备应用样式表

复制代码

@media (monochrome:0) {
.box{height: 100px; width: 100px; background-color: lightgreen;}
}

复制代码
【11】方向(orientation)

  方向指定了设备处于横屏(宽度大于宽度)模式还是竖屏(高度大于宽度)模式

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

  向竖屏设备应用样式表

复制代码

@media (orientation: portrait) {
.box{height: 100px;width: 100px;background-color: lightgreen; }
}

复制代码
【12】分辨率(resolution)

  分辨率指定输出设备的分辨率(像素密度)。分辨率可以用每英寸(dpi)或每厘米(dpcm)的点数来表示

  [注意]关于屏幕三要素(屏幕尺寸、分辨率、像素密度)的相关内容移步至此

  向每英寸至少90点的设备应用样式

复制代码

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值