CSS3 Media Queries 让网页更好的支持移动设备

shanks2013-01-08 23:02:41

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

  1. /* 基本语法 */
  2. @media screen and(min-width:1024px)and(max-width:1280px){
  3. body{padding:1em;}
  4. }
  1. /* 常用类型 */
  2. 类型解释
  3. all 所有设备
  4. braille 盲文
  5. embossed 盲文打印
  6. handheld 手持设备
  7. print文档打印或打印预览模式
  8. projection 项目演示,比如幻灯
  9. screen 彩色电脑屏幕
  10. speech 演讲
  11. tty 固定字母间距的网格的媒体,比如电传打字机
  12. tv 电视

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

  1. /* 常用设备 */
  2. 设备屏幕尺寸
  3. 显示器1280 x 800
  4. ipad 1024 x 768
  5. Android800 x 480
  6. iPhone 640 x 960
  7.  
  8. 1280>1024>960>800>768>640
  9.  
  10. /* 根据上述尺寸简单的分了几个页面版本 */
  11. @media screen and(min-width:1280px){
  12. body{适合较大的台机显示器或更大}
  13. }
  14.  
  15. @media screen and(min-width:800px)and(max-width:1280px){
  16. body{适合一般的台机显示器或笔记本}
  17. }
  18.  
  19. @media screen and(max-width:800px){
  20. body{适合一般的平板电脑或智能手机}
  21. }

国际惯例:IE5.5/6/7是不支持media query的,所以我也把这种不支持利用了起来,尝试去区分IE和非IE浏览器的样式,不知道是否合理?!

  1. @media screen and(min-width:0px){
  2. body{ IE goodbye }
  3. }

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

  1. /*Google的iPhone横屏样式*/
  2. @media screen and(max-height:300px){
  3. body{ iPhone 横屏}
  4. }
  5.  
  6. /*android手机的多分辨率*/
  7. /* for 240 px width screen */
  8. @media only screen and(max-device-width:240px){
  9. body{forAndroid}
  10. }
  11.  
  12. /* for 360px width screen */
  13. @media only screen and(min-device-width:241px)and(max-device-width:360px){
  14. body{forAndroid}
  15. }
  16.  
  17. /* for 480 px width screen */
  18. @media only screen (min-device-width:361px)and(max-device-width:480px){
  19. body{forAndroid}
  20. }
  21.  
  22. /* device-aspect-ratio 特定屏幕长宽比例 */
  23.  
  24. /* for 4:3 screen */
  25. @media only screen and(device-aspect-ratio:4/3){
  26. body{}
  27. }
  28.  
  29. /* for 16:9 and 16:10 screen */
  30. @media only screen and(device-aspect-ratio:16/9)and(device-aspect-ratio:16/10){
  31. body{}
  32. }
  33.  
  34. /* for 480px*800px width screen */
  35. @media only screen (device-aspect-ratio:5/3){
  36. body{}
  37. }

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

上一篇:网站分页技术浅谈(套用不同场景实地解析)
下一篇:CSS3媒体查询

  • >> more看看其他人的看法
  • Please let me know if you're looking for a article author
    for your site. You have some really good articles and I feel I would be a good asset.
    If you ever want to take some of the load off, I'd absolutely love
    to write some articles for your blog in exchange for a link back to mine.
    Please send me an e-mail if interested. Cheers!

  • 1 aud ... 2017-5-15 09:20 星期一
  • }
  • Howdy! Τhis is my first visit t᧐o yοur blog! Ꮃe are
    a ɡroup of volunteers annd starting а new initiative in a community
    in the ѕame niche. Yߋur blog provcided us benefichial informafion tօ ԝork οn. You haᴠe done a extraordinary job!

  • 2 htt ... 2018-9-21 07:17 星期五
  • }
  • I think this iiѕ amоng thhe most important information for me.
    And i'm glad reading your ɑrticle. But shouⅼd remark onn some general tһings, Ƭhe web site style is
    great, the articles is really excellent : D. Ԍood job, chеers

  • 3 Rij ... 2018-9-23 17:40 星期日
  • }

有什么想说的吗?