随着上网方式的多样化，用户选择上网的工具不再仅是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. GO开发环境搭建

    GO开发环境搭建 1)下载GO SDK,并安装 https://golang.google.cn/dl/ 2)下载GO IDE:GOLAND,并安装 3)设置GOROOT和GOPATH 4)新建一个工 ...

  2. Revit中如何给不同构件着色

    在Revit构件密集,默认的显示模式难以区分不同构件的区别,比如建筑立面有很多不同的机电管道,风管.水管,电缆桥架等,可一个给不同的机电管线添加不同的颜色,以示其区别,如下图所示,完成着色后,各种不同 ...

  3. C# System.Collections.Stack

    using System; using System.Collections; public class SamplesStack { public static void Main() { // C ...

  4. 【PMP】项目和运营的区别

    运营管理关注产品的持续性生产和服务的持续运作. 项目与运营会存在产品生命周期的不同时点交叉,例如: 在产品开发.产品升级或提高产量时: 在改进运营或产品开发流程时: 在产品生命周期结束阶段: 在每个收 ...

  5. 基于Centos搭建 Firekylin 个人网站

    系统要求: CentOS 7.2 64 位操作系统 安装 Node.js 使用 yum 命令安装 Node.js curl --silent --location https://rpm.nodeso ...

  6. 浅析Sql Server参数化查询

    说来惭愧,工作差不多4年了,直到前些日子被DBA找上门让我优化一个CPU占用很高的复杂SQL语句时,我才突然意识到了参数化查询的重要性. 相信有很多开发者和我一样对于参数化查询认识比较模糊,没有引起足 ...

  7. SNF快速开发平台--规则引擎介绍和使用文档

    设计目标: a) 规则引擎语法能够满足分单,计费,WMS策略的配置要求.语法是一致和统一的 b) 能够在不修改规则引擎模块的情况下,加入任意一个新的规则:实现上述需求之外的规则配置需求 c) 运算速度 ...

  8. Fraunhofer音频技术为MPEG未来高品质3D音频内容传输的标准依据

    OFweek电子工程网讯:世界着名的音频和多媒体技术研究机构Fraunhofer IIS的基于信道/对象的方案获选成为未来MPEG-H 3D音频标准的依据,此项标准旨在传输高品质的3D音频内容.MPE ...

  9. HashMap中的hash算法总结

    前言 算法一直是我的弱项,然而面试中基本是必考的项目,刚好上次看到一个HashMap的面试题,今天也来学习下 HashMap中的hash算法是如何实现的. 数学知识回顾 << : 左移运算 ...

  10. [k8s]k8s pod的4种网络模式最佳实战(externalIPs )

    hostPort相当于docker run -p 8081:8080,不用创建svc,因此端口只在容器运行的vm上监听 缺点: 没法多pod负载 $ cat pod-hostport.yaml api ...