订阅汇聚素材网Feed

Media Queries

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

/* 基本语法 */
@media screen and (min-width:1024px) and (max-width:1280px){
body{padding:1em;}
}
/* 常用类型 */
类型 解释
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

/* 根据上述尺寸简单的分了几个页面版本 */
@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 }
}
我是通过屏幕尺寸来简单的区分页面样式,如果你想细分样式你可以参考一下内容。

/*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{ }
}

5 人Likes
  

文章转载请注明:Media Queries-汇聚素材网

本文固定链接:http://www.webhj.com/hj-1434.html  +复制链接

Media Queries:等您坐沙发呢!

发表评论

*

*

7 + 2

快捷键:Ctrl+Enter
0全站搜索 1 设计 2 素材 3 教材 4 WEB 5 电子书籍