随着上网方式的多样化，用户选择上网的工具不再仅是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. Android开发中遇到的问题(四)——Android中WARNING: Application does not specify an API level requirement!的解决方法

    今天在手机上调试运行Andorid项目时,发现Console打印出"WARNING: Application does not specify an API level requiremen ...

  2. CSS网页布局垂直居中整理

    一.使用CSS3处理垂直居中方式 1.使用Flex布局处理(推荐),简单好用 body,html{ width:100%; height:100%; } .out { width: 20%; heig ...

  3. 免费网络视频监控软件cmsclient

    http://www.brickcom.com/products/DetailView.php?modelname=CMS-Client&series=CMS#product-support ...

  4. C#中Invoke的用法1

    invoke和begininvoke 区别 一直对invoke和begininvoke的使用和概念比较混乱,这两天看了些资料,对这两个的用法和原理有了些新的认识和理解.  首先说下,invoke和be ...

  5. Notes 和 Domino 已知限制

    Notes 和 Domino 已知限制 功能测试 限制数据库的最大大小是多少? 最大的 OS 文件大小限制 -(最大为 64GB)文本域的最大大小是多少? 15KB(存储):15KB,显示在视图列中R ...

  6. IDEA使用笔记（八）——自动生成 serialVersionUID 的设置

    这个设置比较简单,也有一些博文已经写到了,为什么我还要写哪?(潜台词:因为我想凑一篇博文)我觉得学习,特别是编程学习是需要重复造轮子的,另外,就是加深自己的印象方便自己的查找.还有就是关键点,有些博客 ...

  7. ASP.NET MVC多语言 仿微软网站效果(转)

    本文转自: https://blog.csdn.net/Cooldiok/article/details/7831351 2017年10月22日 21:31:22 Cooldiok 微软作为ASP.N ...

  8. MySQL的reset slave与reset slave all

    reset slave是各版本Mysql都有的功能,可以让slave忘记自己在master binary log中的复制位置. reset slave命令主要完成以下工作内容: -删除master.i ...

  9. 【读书笔记】Data_Mining_with_R---Chapter_2_Predicting Algae Blooms

    本书概要 <Data Mining with R>这本书通过实例,并结合R讲解数据挖掘技术.本书的核心理念就是"Learning it by doing".本书分5章, ...

  10. Atitit 数据库view视图使用推荐规范与最佳实践与方法

    Atitit 数据库view视图使用推荐规范与最佳实践与方法 1. 视图的优点:1 1.1. **提升可读性  定制用户数据,聚焦特定的数据1 1.2. 使用视图,可以简化数据操作.       1 ...