media媒体查询

来源：互联网发布：centos定时重启编辑：程序博客网时间：2024/05/21 10:38

转载地址：设备像素比

转载地址：CSS3 Media Queries

媒体类型type：

all，适合所有设备。默认
print：适用于盲文处决反馈设备。
embossed：换页盲文打印机。
handheld：手持新设备（小屏幕，宽度有限）
priny：打印预览模式
projection：放映机
screen：计算机彩屏
speech：语音合成器--aural（css2）
tty：电传打字机，以及使用固定看都字符网格的媒体(如远程类型、终端或具有有限显示能力的可移动设备)。作者不应该使用带有“tty”媒体类型的像素单元
tv:电视类型设备（适用于电视类型的设备(低分辨率，彩色，有限可滚动屏幕，声音可用)

关键词

and 多个媒体查询query使用。

<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" />

not排除某种特定的媒体类型。

 <link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />

only定某种类型的媒体类型，可以用来排除不支持媒体查询的浏览器。针对不支持媒体特性query但支持媒体类型type的设备，来隐藏样式表。

<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />

媒体特性/条件：media query

width:浏览器可视宽度。min/max
height:浏览器可视高度。min/max
device-width:设备屏幕的宽度。min/max
device-height:设备屏幕的高度。min/max
orientation:检测设备目前处于横向还是纵向状态。portrait/landscape纵/横
aspect-ratio:检测浏览器可视宽度和高度的比例。(例如：aspect-ratio:16/9)min/max
device-aspect-ratio:检测设备的宽度和高度的比例。
color:检测颜色的位数。（例如：min-color:32就会检测设备是否拥有32位颜色）min/max
color-index:检查设备颜色索引表中的颜色，他的值不能是负数。min/max
monochrome:检测单色楨缓冲区域中的每个像素的位数。（这个太高级，估计咱很少会用的到）min/max
resolution:检测屏幕或打印机的分辨率。(例如：min-resolution:300dpi或min-resolution:118dpcm)。min/max
grid：检测输出的设备是网格的还是位图设备。
scan:tv媒体类型的扫描方式 progressive渐进的/interlaced交错的
device-pixel-ratio:设备像素密度

引入方法：

1.link引入css <head>中
<link rel="stylesheet" type="text/css" href="layout.css" media="print">
2.xml方式引入 <head>中
<?xml-stylesheet rel=“stylesheet” href=".css" media="screen">
3.@import方式在css代码中
@import url("layout.css") screen;
4.@media 在css文件中

@media screen{ }

screen，是在告知设备在打印页面时使用衬线字体，在屏幕上显示时用无衬线字体。很多网站都会直接省略screen,因为你的网站可能不需要考虑用户去打印时，你可以直接这样写：

@media (max-width: 960px){    body{        background: #000;          } }

逗号表示并列/或。

 <link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />

设备像素比

webkit-min-device-pixel-ratio的常见值对比（是设备上物理像素和设备独立像素，设备像素比率）
设备分辨率设备像素比率

Android LDPI 320×240 0.75

Iphone 3 & Android MDPI 320×480 1

Android HDPI 480×800 1.5

Iphone 4 960×640 2.0

设备像素为:1.0    (-webkit-min-device-pixel-ratio)
所有non-Retina mac电脑 / 苹果iPhone(第一代) / 苹果iPhone 3 g / 苹果iPhone 3 gs / 苹果iPad(第一代) / 苹果iPad 2 / 苹果iPad迷你(第一代) / 宏碁Iconia A500
三星Galaxy Tab 10.1 /三星Galaxy S

设备像素为:1.3    (-webkit-min-device-pixel-ratio)
华硕MemoPad高清7 / 谷歌Nexus 7(2012型)

设备像素为:1.4    (-webkit-min-device-pixel-ratio)
诺基亚流光(Lumia)520 / 设备像素为:1.5    (-webkit-min-device-pixel-ratio) / 谷歌Nexus S / HTC欲望 / HTC Desire HD / HTC不可思议的年代 / HTC速度
宏达电的感觉 / Kindle Fire高清 / 三星Galaxy S II / 索尼平板电脑Xperia Z / 索尼Xperia U/

设备像素为:2.0    (-webkit-min-device-pixel-ratio)
所有mac视网膜显示器
苹果iPhone 4 / 苹果iPhone 4 s /苹果iPhone 5 / 苹果iPhone 5度 / 苹果iPhone 5 s / 苹果iPhone 6 / 苹果iPad(第三代) / 苹果iPad 4 / 苹果iPad的空气 /苹果iPad迷你(2rd代)
HTC一条X /谷歌的Galaxy Nexus / 谷歌Nexus 4 / 谷歌Nexus 7(2013型) / 谷歌Nexus 10 /摩托罗拉极限摩托 / 三星Galaxy S三世 /三星Galaxy注意二世 /索尼Xperia年代 /索尼Xperia T

设备像素为:2.6    (-webkit-min-device-pixel-ratio)
诺基亚流光(Lumia)930

设备像素为:3.0    (-webkit-min-device-pixel-ratio)
HTC(M7) / HTC的蝴蝶 /华为荣耀6 /苹果iPhone 6 + / LG G2 / 联系5 / OnePlus一 / 相对应的人找到7(X9076)
三星Galaxy S4 / 三星Galaxy注3 / 三星Galaxy注4 / 索尼Xperia Z / 小米小米3

阅读全文

0 0