党娟博客

响应式布局设置,响应式Web开发

@media only screen and only(限定某种设备)

screen 是媒体类型里的一种

and 被称为关键字,其他关键字还包括 not(排除某种设备)


 /* 常用类型 */ 

类型 解释

all 所有设备

braille 盲文

embossed 盲文打印

handheld 手持设备

print 文档打印或打印预览模式

projection 项目演示,比如幻灯

screen 彩色电脑屏幕

speech 演讲

tty 固定字母间距的网格的媒体,比如电传打字机

tv 电视


screen一般用的比较多,下面是我自己的尝试,列出常用的设备的尺寸,然后给页面分了几个尺寸的版本。 


/* 常用设备 */

设备 屏幕尺寸

显示器 1280 x 800

ipad 1024 x 768

Android 800 x 480

iPhone 640 x 960


两种方式 

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

意思是当屏幕的宽度大于600小于800时,应用styleB.css

b@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/ 

  .class {    background: #ccc;  } 

}


device-aspect-ratio

device-aspect-ratio可以用来适配特定屏幕长宽比的设备,这也是一个很有用的属性,比如,我们的页面想要对长宽比为4:3的普通屏幕定义一种样式,然后对于16:9和16:10的宽屏,定义另一种样式,比如自适应宽度和固定宽度: 

@media only screen and (device-aspect-ratio:4/3)


-webkit-min-device-pixel-ratio的常见值对比

(是设备上物理像素和设备独立像素,设备像素比率) 


设备分辨率设备像素比率
Android LDPI320×2400.75
Iphone 3 & Android MDPI320×4801
Android HDPI480×8001.5
Iphone 4960×6402.0


-webkit-min-device-pixel-ratio: 1.0

  • 所有非 Retina 的 Mac

  • 所有非 Retina 的 iOS 设备

  • Acer Iconia A500

  • Samsung Galaxy Tab 10.1

  • Samsung Galaxy S

  • 其他设备


-webkit-min-device-pixel-ratio为1.3

  • Google Nexus 7


-webkit-min-device-pixel-ratio为1.5

  • Google Nexus S

  • Samsung Galaxy S II

  • HTC Desire

  • HTC Desire HD

  • HTC Incredible S

  • HTC Velocity

  • HTC Sensation


-webkit-min-device-pixel-ratio为2.0

  • iPhone 4 iPhone 4S iPhone 5 iPad (3rd generation) iPad 4

  • 所有Retina displays 的MAC

  • Google Galaxy Nexus

  • Google Nexus 4

  • Google Nexus 10

  • Samsung Galaxy S III

  • Samsung Galaxy Note II

  • Sony Xperia S 

  • HTC One X 


 -webkit-min-device-pixel-ratio: 3.0   

  • HTC Butterfly

  • Sony Xperia S


(min-resolution:144dpi)(分辨率)

使用于:位图媒体类型,接受max/min前缀: 

“resolution”媒体特性描述输出设备的分辨率,例如,像素密度。若查询设备的非方形像素,在“min-resolution”查询中指定的值必须与最稀疏尺寸进行比较,在“max-resolution”查询中必须与最密集尺寸进行比较。对于“resolution”(没有“min-”或“max-”前缀)查询从不查询设备的非方形像素。

对于印刷机,相当于分辨率(任意颜色的绘制点的分辨率)。

举例说明:该媒体查询表示样式表适用于分辨率大于每英寸144点的设备:

@media print and (min-resolution: 144dpi) { … }


CSS3 处理响应式图片

对于很多 IOS 开发者来说可能已经不太陌生了,为了适配 Retina 屏幕,传统的 CSS3 实现方式是通过加载一张宽高分别放大两倍的图片,然后通过 Media Queries 使背景图片尺寸减小一倍「background-size:50% 50%;」,例如:

.mod .hd h3 {

    background-image:url(http://img02.taobaocdn.com/tps/i2/T10s3JXn4XXXXnbIAn-105-160.png);/* 普通屏幕 */

}

/* ------------- Retina ------------- */

@media only screen and (-o-min-device-pixel-ratio: 2/1), /* Opera */

only screen and (min--moz-device-pixel-ratio: 2), /* Firefox 16 之前 */

only screen and (-webkit-min-device-pixel-ratio: 2), /* Webkit */

only screen and (min-resolution: 240dpi), /* 标准 */

only screen and (min-resolution: 2dppx) /* 标准 */

{

.mod .hd h3{

background-image:url(http://img04.taobaocdn.com/tps/i4/T1947tXmJhXXcCfooh-210-320.png);

background-size: 105px 155px;

}

}

CSS3 Media Queries 中用来定义设备分辨率的是 「resolution」 媒体特性,同时派生出两个媒体特性,分别是 「min-resolution」和 「max-resolution」。该规范中规定:若查询 Non-Square Pixels (专业术语,指高度与宽度不等的像素,可以理解为「非正方形像素」。计算机屏幕上及高清晰度视频信号中的像素是正方形的(像素宽高比为 1:1)。标准清晰度数码视频信号中的像素都不是正方形的。例如:NTSC制式的像素高度大于宽度,而PAL制式的像素宽度则大于高度。)设备,在「min-resolution」查询中指定的值必须与最稀疏尺寸进行比较,在「max-resolution」查询中必须与最密集尺寸进行比较。对于「resolution」(没有「min-」或「max-」前缀)从不查询 Non-Square Pixels 设备。另外在 CSS image Level 3「image-resolution」属性中定义了一些单位,比如「dppx」。

Chrome 支持私有属性「-webkit-min-device-pixel-ratio」和「-webkit-max-device-pixel-ratio」。

Firefox 8.0 之前错误的接受了整数数值(不带单位),16 开始支持 dppx 单位。

Change our implementation of the resolution media query to use CSS units。

David Barr 在 Webkit 实现了 CSS3「image-resolution」属性, 并且支持了 dppx,dpi 和 dpcm 单位,具体 Chrome 哪个版本开始支持可以自行测试,相信 Media Queries 中很快也会支持了。


需要注意几点:

「-o-min-device-pixel-ratio」的取值是分数比如「2 /3」,Demo,详见:Opera Dev 的文章

Firefox 16 之前版本是「min–moz-device-pixel-ratio」,min 后面有两个「-」。

1dppx 相当于 96dpi。

显而易见,通过 Media Queries 来实现「响应式图片」还是很麻烦,CSS 代码的可维护性不高,有一些 hack 的味道。我们更期望一种原生的语法来选择不同的图片,值得庆幸的是 CSS Image Level 4 中就实现了这种原生语法的「image-set」。

「image-set」语法:

<image-set> = image-set( [ <image-set-decl>,]* [ <image-set-decl> | <color>] )

<image-set-decl> = [ <image> | <string> ] <resolution>

那么上面的例子我们可以改为:

background-image:url(http://img02.taobaocdn.com/tps/i2/T10s3JXn4XXXXnbIAn-105-160.png);/* 普通屏幕 */

background-image: -webkit-image-set(

    url(http://img02.taobaocdn.com/tps/i2/T10s3JXn4XXXXnbIAn-105-160.png) 1x,

    url(http://img04.taobaocdn.com/tps/i4/T1947tXmJhXXcCfooh-210-320.png) 2x);/* Retina */

这里的单位「x」等同于「dppx」,将来是否统一还有待进一步讨论。注意 Webkit 目前只实现了 url() 形式的取值,color、*-gradient() 等暂不支持,而且「x」取负值似乎也是合法的。


转载原文地址:

http://chaofu200900.blog.163.com/blog/static/110119533201341102618140/

http://jingyan.baidu.com/article/bad08e1e80188509c851211d.html

发表我的评论

Hi,您需要填写昵称和邮箱!

  • 必填项