1. Media Queries
    使用css3的媒体查询实现高清屏的图片处理。

    @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (-moz-min-device-pixel-ratio: 1.5),
    only screen and (-o-min-device-pixel-ratio: 3/2),
    only screen and (min-device-pixel-ratio: 1.5) {
    .logo {
    background-image: url('img/logo@2x.jpg');
    background-size: 400px 200px; width: 400px; height: 200px;
    }
    }

    sass的mixin

    //-----------------------------------Retina图片-----------------------------------------
    @mixin image-2x($image, $width, $height) {
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6/2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
    /* on retina, use image that's scaled by 2 */
    background-image: url($image);
    background-size: $width $height;
    }
    }
  2. retina.js下载     免费CND      GitHub
  3. CSS4的image-set属性
    .test {
    background-image: url('img/logo.jpg');
    background-image: -webkit-image-set(url('img/logo.jpg') 1x,url('img/logo@2x.jpg') 2x);
    background-size: 425px 195px;
    width: 425px;
    height: 195px;
    }
  4. HTML5 picture Element
    <picture>
    <source media="(min-width: 1024px)" srcset="foo-large.jpg 1024w, foo-medium.jpg 640w, foo-small.jpg 320w" sizes="50vw" />
    <source srcset="foo@2x.jpg 2x, foo.jpg 1x" />
    <img src="foo.jpg" alt="Bar" />
    </picture>
  5. 服务端处理 Retina Images  github  
    使用方法

HTML5之图片在Retina屏的常用几种处理方式的更多相关文章

  1. xml常用四种解析方式优缺点的分析×××××

    xml常用四种解析方式优缺点的分析 博客分类: xml   最近用得到xml的解析方式,于是就翻了翻自己的笔记同时从网上查找了资料,自己在前人的基础上总结了下,贴出来大家分享下. 首先介绍一下xml语 ...

  2. 使用JavaScript判断图片是否加载完成的三种实现方式

    有时需要获取图片的尺寸,这需要在图片加载完成以后才可以.有三种方式实现,下面一一介绍. 一.load事件 <!DOCTYPE HTML> <html> <head> ...

  3. Vue 常用三种传值方式

    Vue常用的三种传值方式: 父传子 子传父 非父子传值 引用官网一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递.父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消 ...

  4. asp.net 常用几种下载方式

    protected void Button1_Click(object sender, EventArgs e) { /* 微软为Response对象提供了一个新的方法TransmitFile来解决使 ...

  5. 【转】Retina 屏幕下,网页图片的显示兼容

    感谢 Apple,带来了 Retina 屏幕的革命,让我们可以在电子显示屏上享受到印刷级的分辨率.由于分辨率的提升,网页中的文字.Flash 和 SVG 内容显示得比原来更加精细,但网页中的图片却变得 ...

  6. Retina 屏移动设备 1px解决方案

    做移动端H5页面开发时都会遇到这样的问题,用 CSS 定义 1px 的实线边框,在 window.devicePixelRatio=2  的屏幕上会显示成 2px,在 window.devicePix ...

  7. 移动端Retina屏边框线1px 显示为2px或3px问题解决方法

    我们在开发移动端web项目时经常遇到设置border:1px,但是显示的边框却为2px或是3px粗细,这是因为设备像素比devicePixelRatio为2或3引起的.   1.何为“设备像素比dev ...

  8. Retina屏幕下image-set

    实现Retina屏幕下图像的显示方法,还特别给我截取了一段代码: .soso .logo .qqlogo { display: block; width: 134px; height: 44px; b ...

  9. Retina屏实现1px边框

    问题描述 通常我们实现边框的方法都是设置1px的边框,但是在retina屏上因为设备像素比的不同,边框在移动设备上的表现也不相同,例如在devicePixelRatio = 2的retina屏下会显示 ...

随机推荐

  1. HBase 系列(一)—— HBase 简介

    一.Hadoop的局限 HBase 是一个构建在 Hadoop 文件系统之上的面向列的数据库管理系统. 要想明白为什么产生 HBase,就需要先了解一下 Hadoop 存在的限制?Hadoop 可以通 ...

  2. 在虚拟机Linux安装Redis

    在虚拟机上安装 CentOS 7 安装成功后登录Root用户进入 opt目录,下载Redis. 下载Redis 下载命令: wget http://download.redis.io/releases ...

  3. Python中的 x+=x 与 x = x + x的区别

    对于Python中的可变数据类型(列表,字典)来说,+= 和 ..=..+..是不同的 加等是直接在变量的值上面进行操作,会修改了原来变量的值 先等后加会重新分配一个内存空间,不会再原有的变量值上面进 ...

  4. Java调用Http/Https接口(7,end)--WebClient调用Http/Https接口

    WebClient是Spring提供的非阻塞.响应式的Http客户端,提供同步及异步的API,将会代替RestTemplate及AsyncRestTemplate.文中所使用到的软件版本:Java 1 ...

  5. C语言-MySQL单表查询(vs2013环境)

    一.首先配置项目属性: 1.打开mysql的安装路径,找到include文件夹和lib文件夹 如图: 2.在vs2013中, 打开项目–> 属性 –>VC++目录 如图: 把将nclude ...

  6. 自学Python编程的第九天(希望有大牛帮我看看我第一个代码是否有弊端,感谢您们)----------来自苦逼的转行人

    2019-09-19-22:11:33 今天是自学Python的第九天 学的内容是有关文件操作的,如:r.w.a.rb.wb.ab.r+.w+.a+等 有大牛帮我看一下我的代码第一个有没有什么弊端吗? ...

  7. Python基础知识(八)----文件操作

    文件操作 一丶文件操作初识 ###f=open('文件名','模式',编码): #open() # 调用操作系统打开文件 #mode #对文件的操作方式 #encoding # 文件的编码格式 存储编 ...

  8. Java中强大的format

    Java中强大的format Java中允许我们对指定的对象进行某种格式化,从而得到我们想要的格式化样式. Format 首先介绍java.text包中的Format Foramt是一个抽象基类,其具 ...

  9. Telnet入侵WindowsXP

    上一章,采用图形界面配置.这一节,采用命令方式配置 //修复.bat(掩饰名字) @ echo off //关闭回显 regedit.exe /s start.reg ///s 不打印 net sta ...

  10. Clickhouse高可用配置总结

    1. 简述 Clickhouse默认是多分片单副本集群,分布式表的配置是每个分片只有一份,如果某个节点挂掉的话,则会直接导致写入或查询异常:Clickhouse是具有高可用特性的,即每个分片具有2个或 ...