同一张图片,在普通屏显示正常,但高清屏出现模糊。原因是原来一个像素的点分成的四个像素的点进行了显示。

解决方案:在高清屏中把图片变成二倍图,前提是二倍的高清图已经存在。

    .icon{
background: url(bg.png) no-repeat; /* 宽200px; */
}
@media screen and (-webkit-min-device-pixel-ratio:1.5){
.icon{
background-image: url(bgx2.png); /* 宽400px; */
background-size: 200px; /* 宽200px; */
}
}

 

css图片高清适配的更多相关文章

  1. 移动端高清适配方案(解决图片模糊问题、1px细线问题)

    本文介绍了移动端适配的3种方法,以及移动端图片模糊问题和1px细线问题的解决方法.当然了,在这之前先整理了与这些方法相关的知识:物理像素.设备独立像素.设备像素比和viewport. >> ...

  2. 第二十八篇、自定义的UITableViewCell上有图片需要显示,要求网络网络状态为WiFi时,显示图片高清图;网络状态为蜂窝移动网络时,显示图片缩略图

    1)SDWebImage会自动帮助开发者缓存图片(包括内存缓存,沙盒缓存),所以我们需要设置用户在WiFi环境下下载的高清图,下次在蜂窝网络状态下打开应用也应显示高清图,而不是去下载缩略图. 2)许多 ...

  3. [iOS]图片高清度太高, 导致内存过大Crash

    先说一下状况, 后台提供的图片太高清了, 每个图片都在2-4MB, iOS上每个页面需要同时下载并展示10-15张. 这个时候, 如果我多滑动collectionView几次, 直接App就崩溃了(r ...

  4. matlab图片高清复制到visio

    编辑→复制图窗→在visio中粘贴

  5. 移动端H5页面高清多屏适配方案

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

  6. webapp:移动端高清、多屏适配方案(zz)

    来源: http://sentsin.com/web/1212.html 移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉 ...

  7. 解惑好文:移动端H5页面高清多屏适配方案 (转)

    转自:http://mobile.51cto.com/web-484304.htm https://github.com/amfe/lib-flexible/blob/master/src/makeg ...

  8. 移动端高清、多屏适配方案 [来源:http://div.io/topic/1092]

    Lovesueee 发布于 8 月前 移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视 ...

  9. [转]:移动端H5页面高清多屏适配方案

    原文链接:http://www.tuicool.com/articles/YJviea 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们 ...

随机推荐

  1. Eclipse代码/目录虚线对齐设置

    前提: 我的Eclipse版本如下: 比这个版本新或者旧都可以实现如下效果. 实现步骤: 在代码上显示虚线设置有如下方法: 1.如果不使用插件,Eclipse是不支持虚线的,只能是横条的点状,效果如下 ...

  2. 在Electron中通过ffi模块实现JavaScript调用C++动态库

    目前在网上能搜到的JS调C++动态库的实现有两种,一种是通过开发Node.js addon模块的方式实现调用,这种对于我们已有的代码实现比较复杂,需要大量的开发,因此不适用:另一种是通过FFI模块,F ...

  3. shell apt install 按tab键自动补全

    insert if [ -f /etc/bash_completion ]; then . /etc/bash_completion fi to ~/.bashrc

  4. 数据切分——Atlas介绍

    Atlas是由 Qihoo 360公司Web平台部基础架构团队开发维护的一个基于MySQL协议的数据中间层项目.它在MySQL官方推出的MySQL-Proxy 0.8.2版本号的基础上,改动了大量bu ...

  5. 3301 Square words

    3301 Square words  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题解  查看运行结果     题目描述 Description 定义s ...

  6. JavaScript Patterns 2.3 For loops

    HTMLCollections are objects returned by DOM methods such as: • document.getElementsByName() • docume ...

  7. ASP.NET SignalR Hubs API Guide - JavaScript Client

    https://docs.microsoft.com/en-us/aspnet/signalr/overview/guide-to-the-api/hubs-api-guide-javascript- ...

  8. CSS小代码汇总整理

    /**实现斑马线的表格*/table.flexme tbody tr:nth-child(2n){background-color:#D6E7FC;} /*返回偶数序的子元素*/table.flexm ...

  9. Linux扩展正则表达式

    1. 扩展正则表达式 1.1 +(加号) + 表示前一个字符出现1次或1次以上 1.1.1 理解+ 要求:取出文件内容连续出现的小写字母 [root@oldboyedu50-lnb /oldboy]# ...

  10. 9.12NOIP模拟题

    NOIP 2017 全假模拟冲刺                                               hkd 题目名称 Spfa 走楼梯缩小版 滑稽 题目类型 传统 传统 传统 ...