实现Retina屏幕下图像的显示方法,还特别给我截取了一段代码: .soso .logo .qqlogo { display: block; width: 134px; height: 44px; background-image: url(http://mat1.gtimg.com/www/images/qq2012/qqlogo_1x.png); background-image: -webkit-image-set(url(http://mat1.gtimg.com/www/images/…

感谢 Apple,带来了 Retina 屏幕的革命,让我们可以在电子显示屏上享受到印刷级的分辨率.由于分辨率的提升,网页中的文字.Flash 和 SVG 内容显示得比原来更加精细,但网页中的图片却变得异常模糊,存在非常严重的分辨率兼容问题.自从 2010年6月,iPhone4 的上市开始,网页图片的显示兼容问题就已出现,经过几年的发展,配备 Retina 屏幕的电子产品越来越多,如今 Apple 又将 Retina 技术应用到了 Macbook Pro 上,网页图片在 Retina 屏幕下的显示…

原因: 因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在devicePixelRatio=2的retina屏下会显示成2px. 但在IOS8中,已经支持0.5px了,那就意味着, 在devicePixelRatio=2的时候,我们可以使用如下的css: div{ border:1px solid #000; } @media (-webkit-min-device-pixel-ratio: 2) { div{ border:0.5px solid #000; } } 但在ios7以…

移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 首先,选取一款手机的屏幕宽高作为基准(以前是iphone4的320×480,现在更多的是iphone6的375×667). 对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对i…

问题描述 通常我们实现边框的方法都是设置1px的边框,但是在retina屏上因为设备像素比的不同,边框在移动设备上的表现也不相同,例如在devicePixelRatio = 2的retina屏下会显示成2px.这对于拥有像素眼的设计同事来说是无法忍受的,他们会一眼看出这边框粗了很多(真可怕,不过经历这次问题之后,感觉自己也练成了像素眼),并且在用户体验上略差,所以现在要解决的问题就是在retina屏幕下实现1px的边框. 解决方案 查找了一些资料,也对比了很多方案,个人认为这个是css的问题,所…

Photoshop CS6 MAC 中文版破解版 支持Retina屏 目前世界上“最好的化妆品”是一款叫做PhotoShop的产品,它可以帮你去除所有你不满意的地方.上周末,这款最好的化妆品推出了第十三代产品——Adobe PhotoShop CS6 ,所有感兴趣的用户都可以免费下载试用. 此次发布的PS CS6 包括大量优化和调整以及在CS5基础上的一些小升级.最直观的变化要数CS6的整体色调改成更深的灰黑色,按Adobe的说法是为了让用户把注意力更好的放在图片处理上. 详细的介绍不用多说了,…

layout tltle tags post ios7下移动web开发的几个坑 webapp 1.Retina屏下1px border 由于高清屏的特性,1px是由2×2个像素点来渲染,那么我们样式上的border:1px在Retina屏下会渲染成2px的边框,一般有以下几种方法: 图片 阴影 缩放 移动版开发采用软图片的方法: .border { background-image:linear-gradient(180deg, red, red 50%, transparent 50%), l…

做移动端H5页面开发时都会遇到这样的问题,用 CSS 定义 1px 的实线边框,在 window.devicePixelRatio=2  的屏幕上会显示成 2px,在 window.devicePixelRatio=3 的屏幕上会显示成 3px,明明希望是极细的线条,到 Retina 屏上却变得粗大丑陋.这是因为 CSS 中的 px 单位定义的是逻辑像素值,而实际显示的效果会以物理像素呈现,Retina 屏幕的物理像素值和逻辑像素值不同就造成了这种差异. 如果想让 HTML5 页面像 Nativ…

Retina屏的移动设备如何实现真正1px的线? 在retina屏下面,如果你写了这样的meta <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> 你将永远无法写出1px宽度的东西,除此之外,inline的SVG等元素,也会按照逻辑像素来渲染,整个页面的清晰度会打折: 先看看  “诸子百家 ”  是如何实…

文章转载自 酷勤网 http://www.kuqin.com/ 原文链接:http://www.kuqin.com/shuoit/20150530/346322.html 原文摘要:前些日子总被人问起 iOS Retina 屏,设置 1px 边框,实际显示 2px,如何解决? 最后找到一个还算好用的方法:伪类 + transform 原理是把原先元素的 border 去掉,然后利用:before或者:after重做 border ,并 transform 的 scale 缩小一半,原先的元素相对…

物理像素(physical pixel) 一个物理像素是显示器(手机屏幕)上最小的物理显示单元,在操作系统的调度下,每一个设备像素都有自己的颜色值和亮度值. 设备独立像素(density-independent pixel) 设备独立像素(也叫密度无关像素),可以认为是计算机坐标系统中得一个点,这个点代表一个可以由程序使用的虚拟像素(比如: css像素),然后由相关系统转换为物理像素. 所以说,物理像素和设备独立像素之间存在着一定的对应关系,这就是接下来要说的设备像素比. 设备像素比(devic…

首先来看一下造成Retina边框变粗的原因 其实这个原因很简单,因为css中的1px并不等于移动设备的1px,这些由于不同的手机有不同的像素密度.在window对象中有一个devicePixelRatio属性,他可以反应css中的像素与设备的像素比. devicePixelRatio的官方的定义为:设备物理像素和设备独立像素的比例,也就是 devicePixelRatio = 物理像素 / 独立像素. 解决边框变粗的办法 1.0.5px边框 在2014年的 WWDC,“设计响应的Web体验” 一…

前些日子总被人问起 iOS Retina 屏,设置 1px 边框,实际显示 2px,如何解决?原来一直没在意,源于自己根本不是像素眼……今天仔细瞅了瞅原生实现的边框和CSS设置的边框,确实差距不小…… 上图是原生实现,下图是 CSS 边框,手机上对比更加明显 然后,如何解决呢?搜遍整个谷歌,发现好多人早已开始研究解决方案了.到底有哪些方案,到底好不好用呢?试过才知道,把我试过的结论记录一下. 有说用 0.5px 解决的 在2014年的 WWDC,“设计响应的Web体验” 一讲中,Ted O’Co…

我们在开发移动端web项目时经常遇到设置border:1px,但是显示的边框却为2px或是3px粗细,这是因为设备像素比devicePixelRatio为2或3引起的.   1.何为“设备像素比devicePixelRatio”      设备上物理像素和设备独立像素(device-independent pixels (dips))的比例.      公式表示就是:window.devicePixelRatio = 物理像素 / dips   dip或dp,(device independen…

最近在使用MyEclipse时最让我头疼的问题就是MyEclipse并不能很好的支持苹果的Retina屏幕,看着字体会非常模糊,那叫一个心酸,真白瞎了这块好屏幕.(不知道最新的版本有没有支持,反正我的是MyEclipse10是支持不了,四处查了半天资料,发现网上有的太不详细,有的根本不管用,所以特地来分享一下,我的是10.10.3的系统). 首先,需要找到应用程序里的MyEclipse.app右键显示包内容-->Contents-->Profile-->然后右键MyEclipse显示包内…

我们在开发移动端web项目时经常遇到设置border:1px,但是显示的边框却为2px或是3px粗细,这是因为设备像素比devicePixelRatio为2或3引起的. 何为“设备像素比devicePixelRatio” 设备上物理像素和设备独立像素(device-independent pixels (dips))的比例. 公式表示就是:window.devicePixelRatio = 物理像素 / dips   dip或dp,(device independent pixels,设备独立像…

首先我是在VMWARE下装的Windows Blue,是否改用BootCamp直接装就没问题我不知道,理论上应该无差别. 谣言里那个Windows Blue里的缩放功能可以完美支持Retina,但实际上在分辨率提高后,Metro UI也明显缩小,同样没有出现保持在1400x900分辨率下的大小,跟原来的8.0没有什么区别. 不知道那些说8.1增加了高清屏支持,并很兴奋地说文本缩放多了个自定义选项的人们到底是在想啥,到底有没有看清楚在8.0里放大200%这个其实就写着有. Winddows8.0…

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) { .l…

2014-12-31更新:截至到IOS8.1,safari仍不支持@supports待safari支持@supports, 就可以利用0.5px了! 2014-7-25更新:1. 修正dpr = 1.5 机器下四角边框的缩放比例:2. 修正右边框(rBor)的transform-origin为100%, 100%;3. 添加对 dpr = 3 机器的支持: 通过以下机器验证:小米1(dpr = 1.5).SAMSUNG S3(dpr = 2).NEXUS 5(dpr =3) 测试地址: 移动we…

.border { position: relative; width: 300px; height: 200px; } .border:after { border: 1px solid #ff3300; display: block; content: ''; position: absolute; top:; right:; bottom:; left:; -webkit-transform-origin: 0 0; -webkit-transform: scale(1); pointer…

背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 1)首先,选取一款手机的屏幕宽高作为基准(以前是iPhone4的320×480,现在更多的是iphone6的375×667). 2)对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对iphone6而言:…

来源: http://sentsin.com/web/1212.html 移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 首先,选取一款手机的屏幕宽高作为基准(以前是iphone4的320×480,现在更多的是iphone6的375×667). 对于retina屏幕(如: dpr=2),为了达到高清…

转自:http://mobile.51cto.com/web-484304.htm https://github.com/amfe/lib-flexible/blob/master/src/makegrid.js https://segmentfault.com/a/1190000006839117 对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对iphone6而言:原先的375×667,就会变成750×1334).…

转载出处:http://www.w3cplus.com/css/towards-retina-web.html 维基百科将Retina译为“视网膜”."Retina"一词,原意是“视网膜”的意思,指显示屏的分辨率极高,使得肉眼无法分辨单个像素. 苹果的“iPhone4”和"new iPad"以及“Macbook Pro”中已经使用了Retina(视网膜)技术.这是一种新的屏幕的显示技术.苹果表示,Retina屏幕是一种具备超高像素密度的液晶屏,它可以将960x640…

Lovesueee 发布于 8 月前 移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 首先,选取一款手机的屏幕宽高作为基准(以前是iphone4的320×480,现在更多的是iphone6的375×667). 对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍…

原文链接:http://www.tuicool.com/articles/YJviea 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 1)首先,选取一款手机的屏幕宽高作为基准(以前是iPhone4的320×480,现在更多的是iphone6的375×667). 2)对于retina屏幕(如: dpr=2),为了达到高清效果…

支持image-set:如果你的浏览器支持image-sete,而且是普通显屏下,此时浏览器会选择image-set中的@1x背景图像: Retina屏幕下的image-set:如果你的浏览器支持image-set,而且是在Retina屏幕下,此时浏览器会选择image-set中的@2x背景图像. 上面就是有关于“image-set”的简单介绍. 为什么要使用image-set而不使用Media Queries? 如果你有阅读有关于Retina的文章,你就会知道,在Retina屏幕下实现图像显示…

背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 1)首先,选取一款手机的屏幕宽高作为基准(以前是iPhone4的320×480,现在更多的是iphone6的375×667). 2)对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对iphone6而言:…

点击上方"前端自习课"关注,学习起来~ 一.问题分析 使用 canvas 绘制图片或者是文字在 Retina 屏中会非常模糊.如图: 因为 canvas 不是矢量图,而是像图片一样是位图模式的.高 dpi 显示设备意味着每平方英寸有更多的像素.也就是说二倍屏,浏览器就会以 2 个像素点的宽度来渲染一个像素,该 canvas 在 Retina 屏幕下相当于占据了2倍的空间,相当于图片被放大了一倍,因此绘制出来的图片文字等会变模糊. 因此,要做 Retina 屏适配,关键是知道当前屏幕的设…

来源: http://www.css88.com/archives/9297 使用 canvas 绘制图片或者是文字在 Retina 屏中会非常模糊.如图: 因为 canvas 不是矢量图,而是像图片一样是位图模式的.高 dpi 显示设备意味着每平方英寸有更多的像素.也就是说二倍屏,浏览器就会以2个像素点的宽度来渲染一个像素,该 canvas 在 Retina 屏幕下相当于占据了2倍的空间,相当于图片被放大了一倍,因此绘制出来的图片文字等会变模糊. 因此,要做 Retina 屏适配,关键是知道当…