利用media query让背景图适应不同分辨率的设备
作者：tgideas 时间：2012-08-19
0
随着上网方式的多样化，用户选择上网的工具不再仅是PC，而可以是手机，或者平板电脑。随之而来的问题是如何让网页适应不同分辨率，这给前端工程师们带来了新的挑战，其中重要的一点是如何让图片能在不同的分辨率下都能给用户带来良好的用户体验？
方法概述
CSS3中的media query属性让我们可以根据浏览器的高宽，设备的像素比等来使用不同的CSS。当然它还一些别的用法，具体请参考这里。
device-pixel-ratio是media query一查询条件，用于获得设备的像素比。一般来说iPhone4/4s的值是2，高分辨率的Andriod设备是1.5，一般设备是1，有了这些条件，我们就可以为不同的设备提供不同分辨率的图片了。
事先假定让图片兼容以上像素比，展示一张宽高为100px的图片。首先我们需要准备三张不同分辨率的图片：当正常像素比为1时，我们载入的是正常图片100px*100px，当像素比为1.5时，载入150px*150px的图片，当像素比为2.0，载入200px*200px的图片。
利用media query我们可以这样写：
大家可以用不同的分辨率的设备查看Demo：
http://tgideas.qq.com/demo/media_query/demo_01.htm
效果对比：
由于像素比的改变，背景图像的尺寸按像素比的倍数放大，所以需要缩小图片，可利用background-size这个属性来缩放图片。像素比为1.5，则background-size：1/1.5≈66.7%；像素比为2，则background-size：1/2≈50%。
优点：
1.使用CSS3的media query就可以做到设备像素比的判断，方法简单，成本低。
2.图片便于修改，只需修改css文件。
缺点：
使用会产生这样的问题，并不是每个设备都像iPhone4一样像素比是2。看看我们刚做的，光以上三种像素比，我们就得提供3张不同的图片，如果有更多种像素比呢，那可就是体力活了。
解决方法：或许我们可以创建一张更大的（2的n倍分辨率）的图片，然后按比例去缩小图片来适配不同像素比的设备。可这又意味着用户得加载更大的图片，耗费更多时间和流量。
兼容性
media query兼容性列表：
从表中我们可以看出media query并不支持IE9以下浏览器。
考虑到多终端设备如iPhone，抑或是Android系统自带的浏览器，都是高级浏览器，对media query都做做到良好支持，所以我们可以把IE浏览器排除在外。
也可以添加添加下面的JS，让IE9之前的版本支持：
总结
设备的分辨率一直在改变，但是我们追求用户良好用户体验的理念却是一直不变的。上面的方法不一定是最好的，或许会有更多更好的来替代它。比如利用@font-face，外链入图案矢量字体，或使用svg格式的图片等等。每个方法都有它的优缺点，只有在实践中不断的磨合，才能找到其中的平衡点。
方法概述
CSS3中的media query属性让我们可以根据浏览器的高宽，设备的像素比等来使用不同的CSS。当然它还一些别的用法，具体请参考这里。
device-pixel-ratio是media query一查询条件，用于获得设备的像素比。一般来说iPhone4/4s的值是2，高分辨率的Andriod设备是1.5，一般设备是1，有了这些条件，我们就可以为不同的设备提供不同分辨率的图片了。
事先假定让图片兼容以上像素比，展示一张宽高为100px的图片。首先我们需要准备三张不同分辨率的图片：当正常像素比为1时，我们载入的是正常图片100px*100px，当像素比为1.5时，载入150px*150px的图片，当像素比为2.0，载入200px*200px的图片。
利用media query我们可以这样写：
大家可以用不同的分辨率的设备查看Demo：
http://tgideas.qq.com/demo/media_query/demo_01.htm
效果对比：
由于像素比的改变，背景图像的尺寸按像素比的倍数放大，所以需要缩小图片，可利用background-size这个属性来缩放图片。像素比为1.5，则background-size：1/1.5≈66.7%；像素比为2，则background-size：1/2≈50%。
优点：
1.使用CSS3的media query就可以做到设备像素比的判断，方法简单，成本低。
2.图片便于修改，只需修改css文件。
缺点：
使用会产生这样的问题，并不是每个设备都像iPhone4一样像素比是2。看看我们刚做的，光以上三种像素比，我们就得提供3张不同的图片，如果有更多种像素比呢，那可就是体力活了。
解决方法：或许我们可以创建一张更大的（2的n倍分辨率）的图片，然后按比例去缩小图片来适配不同像素比的设备。可这又意味着用户得加载更大的图片，耗费更多时间和流量。
兼容性
media query兼容性列表：
| 类型 | IE | Firefox | Chrome | Opera | Safari |
| 版本 | (×)IE6 | (×)Firefox 2.0 | (√)Chrome 1.0.x | (√)Opera 9.63 | (√)Safari 3.1 |
| (×)IE7 | (×)Firefox 3.0 | (√)Chrome 2.0.x | (√)Safari 4 | ||
| (×)IE8 | (√)Firefox 3.5 |
从表中我们可以看出media query并不支持IE9以下浏览器。
考虑到多终端设备如iPhone，抑或是Android系统自带的浏览器，都是高级浏览器，对media query都做做到良好支持，所以我们可以把IE浏览器排除在外。
也可以添加添加下面的JS，让IE9之前的版本支持：
总结
设备的分辨率一直在改变，但是我们追求用户良好用户体验的理念却是一直不变的。上面的方法不一定是最好的，或许会有更多更好的来替代它。比如利用@font-face，外链入图案矢量字体，或使用svg格式的图片等等。每个方法都有它的优缺点，只有在实践中不断的磨合，才能找到其中的平衡点。
TAG：CSS3media query
热门文章
-
1
瀑布流布局之KISSY.Waterfall插件方法
-
2
人民币符号￥在css和html正确显示
-
3
大数据DaaS创业公司“星图数据”上线“D-Matrix”产品，提供可视化在线产品销售数据报告
-
4
Telefarm：日本现实版开心农场，玩家用手机就能耕作获得真实收成
-
5
php生成二维码方法及二维码名片的生成格式vcard介绍
-
6
细节见真章！设计时间轴我学会的四件事
-
7
腾讯游戏流程规范信息可视化项目实战
-
8
Iconfont矢量图标平台全面升级
-
9
会员成长体系icon设计总结
-
10
网易严选，通过ODM模式满足消费者需求
-
11
8个神奇的网页瀑布流布局主题及其做法揭秘
-
12
处理图片背景突出主体
-
13
医疗初创公司PillPack：研发私人订制药品包，解决吃药烦恼
-
14
瀑布流布局主题制作之jQuery插件Masonry
-
15
可视化的地铁线路图的jQuery插件
-
16
盐、香料、花瓶、可可、白T恤：盘点日本五家用心专一的主题商店
-
17
jQuery固定浮动侧边栏(jQuery fixed Sidebar)
-
18
CSS3 icon font完全指南
-
19
值得收藏：优秀产品设计中60个以小见大的交互体验
-
20
学学苹果产品设计中的消费心理学——圆角设计与曲线诱惑
© 2011 - 2020 钛锋网 TMTForum.com 沪ICP备15013635号