走向Retina Web

RETINA时代的前端优化

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

</head>

<body>

    <style>

        .g {

            width: 300px;

            height: 200px;

            background-image: url(g.jpg);

            background-size: 300px 200px;

        }

        @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) {

            .icon {

                background-image: url(g@2x.jpg);

            }

        }

    </style>

    <div class="g"></div>

    <script>

        var img = new Image()

        img.width = 300

        img.height = 200

        img.src = window.devicePixelRatio > 1 ? 'g@2x.jpg' : 'g.jpg'

        document.body.appendChild(img)

    </script>

</body>

</html>

Retina的更多相关文章

  1. [原创]Macbook Pro Retina 15吋安装Windows 7和Windows 8.1方法

    前言 本以为有Bootcamp神器在手,Macbook装Win系统应该是不在话下,没想到着实折腾了一番.期间因为误操作导致OSX也挂掉进不去只得磁盘全部抹掉网络恢复安装.为了让大家少走弯路,提供个人安 ...

  2. 移动端视网膜（Retina）屏幕下1px边框线 解决方案

    原因: 因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在devicePixelRatio=2的retina屏下会显示成2px. 但在IOS8中,已经支持0.5px了,那就意味着, 在de ...

  3. cocostudio做出来的界面如何进行分辨率适配，兼论cocos2dx3的多分辨率适配机制，以及retina适配机制

    cocos有很多代码实际上都不再使用了,看代码时反而误导了程序员. 比如一个简单的分辨率适配,我查到了setContentSize,然后调用setContentSize,毫无用处啊!于是乎,我到处查资 ...

  4. 实测:Windows 8.1 (Windows Blue) 第三方桌面应用无法支持Retina屏，效果与Windows8.0似无差别。

    首先我是在VMWARE下装的Windows Blue,是否改用BootCamp直接装就没问题我不知道,理论上应该无差别. 谣言里那个Windows Blue里的缩放功能可以完美支持Retina,但实际 ...

  5. Retina Display and Eclipse Mac视网膜屏和Eclipse

    I have a Retina Display and Eclipse looks blurry. How can I fix it? You need to tell Mac OS that Ecl ...

  6. Retina屏实现1px边框

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

  7. [转]在cocos2d-x中让一个项目适配iphone、iphone retina、ipad、ipad retina四种分辨率

    http://cankeyyin.blog.163.com/blog/static/12336178320124149391202/ 原理:将iphone的hd图片给ipad用,即: 使用原iphon ...

  8. 20140207 - Java and Mac OS X Retina

    在Mac下使用文件管理工具类似Total Commander的muCommander,muCommander的编写语言是Java,打开后发现Java不兼容Mac Retina. muCommander ...

  9. 如何判断retina,如何判断设备的比例

    http://www.189works.com/article-95647-1.html 说起iPhone 4带来的革新,retina display绝对是最吸引眼球的一项,以至于我现在看电脑的显示屏 ...

  10. Retina视网膜屏中CSS3边框图片像素虚边的问题

    虽然CSS3新增了这个功能,但是在W3school里面并没有给出具体详细的解释,还好网上不乏大神给你我们很全面的解释其中的原理-css3:border-image边框图像详解 边框图片的原理是四个角不 ...

随机推荐

  1. git github 使用教程

    参考文章:文章地址: http://wuyuans.com/2012/05/github-simple-tutorial/ github是一个基于git的代码托管平台,付费用户可以建私人仓库,我们一般 ...

  2. iOS控件——UIView与UIImageView播放动画的实现方法

    1.UIView //初始状态 ［UIView animateWithDuration:(int) animations:^{ //最终状态 }completion:^(BOOL finished){ ...

  3. html-----008

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. MongoDB源码分析——mongo与JavaScript交互

    mongo与JavaScript交互 源码版本为MongoDB 2.6分支     之前已经说过mongo是MongoDB提供的一个执行JavaScript脚本的客户端工具,执行js其实就是一个js和 ...

  5. MongoDB源码编译

    MongoDB源码编译 本人编译的版本编译的版本为mongodb2.6分支,目前MongoDB3.0已经发布,编译步骤和2.6的差不多,不过3.0版本要求编译器支持c++11标准,所以如果是在Linu ...

  6. Asp.net创建伪静态页面

    下面是我研究了好几天和同事一起才研究出来的,原创. 1伪静态的定义: 伪静态是相对真实静态来讲的,通常我们为了增强搜索引擎的友好面,都将文章内容生成静态页面,但是有的朋友为了实时的显示一些信息.或者还 ...

  7. c语言位运算符

    C语言既具有高级语言的特点,又具有低级语言的功能. 所谓位运算是指进行二进制位的运算. C语言提供的位运算: 运算符   含义  &   按位与  |   按位或  ∧   按位异或  ∽   ...

  8. ruby环境sass编译中文出现Syntax error: Invalid GBK character错误解决方法

    sass文件编译时候使用ruby环境,无论是界面化的koala工具还是命令行模式的都无法通过,真是令人烦恼. 容易出现中文注释时候无法编译通过,或者出现乱码,找了几天的解决方法终于解决了. 这个问题的 ...

  9. 结构型模式(Structural patterns)->外观模式(Facade Pattern)

    动机(Motivate): 在软件开发系统中,客户程序经常会与复杂系统的内部子系统之间产生耦合,而导致客户程序随着子系统的变化而变化.那么如何简化客户程序与子系统之间的交互接口?如何将复杂系统的内部子 ...

  10. jsonp跨域访问详解

    jsonp是"用来跨域的" 同源策略 首先基于安全的原因,浏览器是存在同源策略这个机制的,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性. 1.随便建两个网 ...