post

让网页支持多分辨率:CSS3 Media Queries

今天修改博客友情链接的时候,发现了css3的Media Queries写法,原来支持pc,iPhone,iPad等设备分辨率的写法是靠这个特性来完成的;

简单举个例子:下面2张图,在pc上分类目录显示为两列,在iPhone上则显示为四列,而且在iPhone上,博客都是以一列来显示的,在iPad上则显示两列;

其实实现不难,就是针对不对分辨率来设定样式,下面详细介绍下这个特性的语法。
让网页支持多种分辨率设备让网页支持多种分辨率设备

以下内容转载自:转自:CSS3 Media Queries 让网页更好的支持移动设备-imshanks.com

CSS3的Media Queries可以查询设备的屏幕尺寸颜色等信息,我们就可以根据不同的设备来写CSS,让网页在不同设备上有更好的用户体验。本站做了一些尝试,有兴趣的朋友可以缩放网页窗口看下效果。下面简单介绍一下基本用法:

[css collapse=”false”]
/* 基本语法 */
@media screen and (min-width:1024px) and (max-width:1280px){
body{padding:1em;}
}
[/css]

常用类型
类型 解释
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

1280 > 1024 > 960 > 800 >768 > 640

[css collapse=”false”]
/* 根据上述尺寸简单的分了几个页面版本 */
@media screen and (min-width:1280px){
body{ 适合较大的台机显示器或更大 }
}

@media screen and (min-width: 800px) and (max-width: 1280px) {
body{ 适合一般的台机显示器或笔记本 }
}

@media screen and (max-width: 800px) {
body{ 适合一般的平板电脑或智能手机 }
}
国际惯例:IE5.5/6/7是不支持media query的,所以我也把这种不支持利用了起来,尝试去区分IE和非IE浏览器的样式,不知道是否合理?!

@media screen and (min-width: 0px) {
body{ IE goodbye }
}
[/css]

我是通过屏幕尺寸来简单的区分页面样式,如果你想细分样式你可以参考一下内容。

[css collapse=”false”]
/*Google的iPhone横屏样式*/
@media screen and (max-height:300px){
body{ iPhone 横屏 }
}

/*android手机的多分辨率*/
/* for 240 px width screen */
@media only screen and (max-device-width:240px){
body{ for Android }
}

/* for 360px width screen */
@media only screen and (min-device-width:241px) and (max-device-width:360px){
body{ for Android }
}

/* for 480 px width screen */
@media only screen (min-device-width:361px)and (max-device-width:480px){
body{ for Android }
}

/* device-aspect-ratio 特定屏幕长宽比例 */

/* for 4:3 screen */
@media only screen and (device-aspect-ratio:4/3){
body{ }
}

/* for 16:9 and 16:10 screen */
@media only screen and (device-aspect-ratio:16/9) and (device-aspect-ratio:16/10){
body{ }
}

/* for 480px*800px width screen */
@media only screen (device-aspect-ratio:5/3){
body{ }
}
[/css]

推荐个工具《protofluid模拟多款移动终端浏览体验》
http://mediaqueri.es/是一个国外的网站,上面有许多使用Media Queries的作品展示。

Speak Your Mind

*