随着上网方式的多样化，用户选择上网的工具不再仅是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

利用media query让背景图适应不同分辨率的设备的更多相关文章

  1. 利用css3的多背景图属性实现幻灯片切换效果

    css3里关于背景的属性增加了可以添加多背景图的特性,例如: .box{background: url(img/1.png),url(img/2.png),url(img/3.png);} 这段css ...

  2. 采用CSS3 Media Query技术适应Android平板屏幕分辨率和屏幕像素密度

    采用HTML5在开发移动应用程序满足各种需求Android分辨率和屏幕的平板设备密度,这是非常麻烦的过程,最终的解决方案是使用css media query,匹配相同的时间分辨率和屏幕像素密度.上进行 ...

  3. 利用media query写响应式布局

    最近才接触到响应式布局的概念,之前用到的bootstrap就是一种响应式布局的框架.学习的时候参考了http://blog.csdn.net/shoyer/article/details/829301 ...

  4. media query ie8- 兼容实现总结

    虽然说响应式设计的理想状态是,需对pc/移动各种终端进行响应:但是现实是高分辨率的pc端与手机终端屏幕相差太大,像电商这样有大量图片和文字信息的同时排版要求精准的页面,设计一个同时适应高分辨率pc又适 ...

  5. media type与media query

    media type(媒体类型)是css 2中的一个非常有用的属性,通过media type我们可以对不同的设备指定特定的样式,从而实现更丰富的界面.media query(媒体查询)是对media ...

  6. 在javascript中使用媒体查询media query

    由于需要,我们可能会在js中用到一些media query,从而针对不同的分辨率做一些操作. //全兼容的 事件绑定 and 阻止默认事件 var EventUtil = { //Notice: ty ...

  7. media query(媒体查询)和media type(媒体类型)

    media type(媒体类型)是css 2中的一个非常有用的属性,通过media type我们可以对不同的设备指定特定的样式,从而实现更丰富的界面.media query(媒体查询)是对media ...

  8. css Media Query详解

    Media Queries详解 Media Queries直译过来就是“媒体查询”,在我们平时的Web页面中head部分常看到这样的一段代码: 1 <link href="css/re ...

  9. CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)

    点评:Media Queries这功能是非常强大的,他可以让你定制不同的分辨率和设备,并在不改变内容的情况下,让你制作的web页面在不同的分辨率和设备下都能显示正常,并且不会因此而丢失样式   Med ...

随机推荐

  1. event对象中 target和currentTarget 属性的区别。

    首先本质区别是: event.target返回触发事件的元素 event.currentTarget返回绑定事件的元素

  2. Ubuntu下升级Git以及获取ssh keys的代码

    今天开始用的git,记下获取ssh keys 的代码 ? 1 2 3 ssh-keygen -t rsa -C "your_email@example.com" # Enter f ...

  3. IEEE 754二进制浮点数算术标准

    可能很多人都遇到过浮点数精度丢失的问题,下面以JavaScript为例. 1 - 0.9 = 0.09999999999999998 纳尼,不应该是0.1么,怎么变成0.099999999999999 ...

  4. Alpha通道

     Alpha通道是计算机图形学中的术语,指的是特别的通道,意思是“非彩色”通道,主要是用来保存选区和编辑选区.真正让图片变透明的不是Alpha 实际是Alpha所代表的数值和其他数值做了一次运算  为 ...

  5. 如何在 Github 上发现优秀的开源项目？

    之前发过一系列有关 GitHub 的文章,有同学问了,GitHub 我大概了解了,Git 也差不多会使用了,但是还是搞不清 GitHub 如何帮助我的工作,怎么提升我的工作效率? 问到点子上了,Git ...

  6. Android---Hellow World

    在搭建好了Android的开发环境后,接下来要做的事情就是开始开发我们的第一个Android应用程序---Hello World. 1.我们新建一个android项目: Application Nam ...

  7. [转]linux(ubuntu)上运行网易popo

    popo没有linux版,连web版和android版都没有,这个实在是不方便.搞了很久,终于搞定了ubuntu上运行popo,暂时还没出现什么问题. 首先要安装PlayOnLinux,直接安装win ...

  8. Chrome Debugger 温故而知新：上下文环境

    最早是在IOS开发中看到过这种调试方式.在无意间发现Chrome Debugger也可以.直接上图: 解释:默认的控制台想访问变量.都是只能访问全局的.但当我们用debugger; 断点进入到内部时, ...

  9. Socket网络编程--聊天程序(1)

    很早的一段时间,看了APUE和UNPv1了解了网络编程,但是但是只是看而已,没有具体的实践,趁现在没有什么事做,就来实践了解一下网络编程.写博客保存下来,方便以后用到的时候可以查到. 此次的聊天程序是 ...

  10. 【GMT43智能液晶模块】例程八：ADC实验——电源监控

    实验原理: STM32内部集成三个12位ADC,GMT43的所有电源经过电阻分压接 入到ADC的输入通道内,输入电流经过高端电流检测芯片ZXCT1009F输入 到ADC的输入通道内,从而实现电源监控功 ...