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. eclipse创建springboot项目的三种方法

    本文链接:https://blog.csdn.net/mousede/article/details/81285693 方法一 安装STS插件 安装插件导向窗口完成后,在eclipse右下角将会出现安 ...

  2. js对象的深入理解(六)

    一.对象的创建(四种模式)1.工厂模式工厂模式示例: function createPerson(name,age){ var obj = { name:name, age:age, sayName: ...

  3. slf4j的正确使用

    头两天领导分配个任务是要把项目中所有try catch里的异常处理收集到elk中,由于之前的处理方式五花八门,就集中处理了下, 事后还被批评了. 不是所有的异常信息都需要被记录到log中 使用SLF4 ...

  4. Hybris订单价格的折扣维护

    backoffice里创建一个新订单,维护一个行项目,添加一个产品: 在行项目的SubTotal界面,维护Base Price,在Discount values字段里,输入折扣信息:discount: ...

  5. Python 多线程爬取站酷(zcool.com.cn)图片

    极速爬取下载站酷(https://www.zcool.com.cn/)设计师/用户上传的全部照片/插画等图片. 项目地址:https://github.com/lonsty/scraper 特点: 极 ...

  6. idea中新增package总是嵌套的解决方法

    在idea中创建package,为了方便会将com.xx.xx作为一个package,下面添加对应的子package.比如service,config等.但是当我创建是总是会嵌套在下面变成了com.x ...

  7. 微信小程序转义解析渲染html

    今天开发小程序时,想调用商品详情字段,发现大部分是用编辑器编辑的html原生标签,无法在小程序直接使用. 后面自己使用正则和字符串替换,效果也不佳. 最后在网上找到了wx-mina-html-view ...

  8. node基础学习——操作文件系统fs

    操作文件系统fs 1.在Node.js中,使用fs模块来实现所有有关文件及目录的创建.写入及删除.在fs模块中,所有对文件及目录的操作都可以使用同步与异步两种方法,具有Sync后缀的方法均为同步方法. ...

  9. go语言笔记1

    Go语言学习整理 本文基于菜鸟教程,对于自己不明白的点加了点个人注解,对于已明确的点做了删除,可能结构不太清晰,看官们可移步Go语言教程 1    Go语言结构当标识符(包括常量.变量.类型.函数名. ...

  10. redis启动异常处理一例

    rm -rf /var/log/redis/redis.log echo "net.core.somaxconn= 1024" >> /etc/sysctl.conf ...