在近期的开发中，偶然发现前端界面在6s上未经授权，禁止复制转载。【原创内容，转载请注明出处】出现了一条白色亮线，这种情况就像屏幕坏死著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。一样，及其扎眼。经过请教和研究，发现这是【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。高分辨率屏幕带来的结果。

iPhone 6s的屏幕为4.7英寸13【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net34 x 750像素，苹果的一款电脑Ma【本文受版权保护】著作权归作者所有，禁止商业用途转载。cBook Pro达到了2880×180【转载请注明来源】【版权所有，侵权必究】0高分辨率，分辨率约为220 PPI，达【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】到“Retina”级别，而我们普通电脑的【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。屏幕比较高清的有14寸1920X1080【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net。这些高分辨率的屏幕虽然为用户带来了4K【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。级体验，却为前端工程师埋下了一个又一个的【未经授权禁止转载】本文作者：唐霜，转载请注明出处。坑，让开发变得更加复杂和困难。

同样尺寸的图片变得模糊原创内容，盗版必究。

在电脑和普通分辨率的Android手机上【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net看上去很清晰的图片，放到Retina屏上【本文受版权保护】【原创内容，转载请注明出处】会出现模糊。期初我以为是图片太小而引起的【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。，觉得解决这一问题的办法就是把图片加大，【本文首发于唐霜的博客】【转载请注明来源】放到高分辨率屏幕下时，进行缩小显示，就可本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】以变清晰。但在通过向朋友请教之后，才了解【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net，核心问题在于：Retina屏将传统的四个物理像素点模拟【转载请注明来源】转载请注明出处：www.tangshuang.net一个像素点。由于这个原因，几乎所有的图片甚至是字体【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】，都有可能出现模糊的情况，具体可以看知乎【作者：唐霜】【原创不易，请尊重版权】上大神对此的回复本文版权归作者所有，未经授权不得转载。。转载请注明出处：www.tangshuang.net

@解决思路：转载请注明出处：www.tangshuang.net

图片或字体在Retina上出现的模糊，要著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。从两个方面去解决。第一个是尺寸，在普通屏本文作者：唐霜，转载请注明出处。原创内容，盗版必究。幕上的图片，需要将长宽同时扩大到原来的2未经授权，禁止复制转载。【转载请注明来源】倍，才能在Retina上显示为原来的尺寸【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。。第二个是直接在Retina屏上作图，拒原创内容，盗版必究。未经授权，禁止复制转载。绝图片放到Retina上的平滑处理，如果【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。在设计作图的时候就直接再Retina上进【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】行处理，那么出来的图本身就会是普通屏幕的【未经授权禁止转载】【本文首发于唐霜的博客】放大版，兼容了前面的第一点，同时，避免了本文作者：唐霜，转载请注明出处。【本文受版权保护】在其他retina屏上图片为了拉伸出现锯本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net齿而自动采取的平滑处理。

在CSS中，有一个属性为image-se【转载请注明来源】原创内容，盗版必究。t，可以为不同的屏幕配不同尺寸的图片。具转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。体用法如下：

img {
    background: url(pic.png) 0 0 no-repeat;
    background-image: -webkit-image-set(url(pic.png) 1x, url(pic@2x.png) 2x);
    background-image: -moz-image-set(url(pic.png) 1x,url(images/pic@2x.png) 2x);
    background-image: -ms-image-set(url(pic.png) 1x,url(images/pic@2x.png) 2x);
    background-image: -o-image-set(url(url(pic.png) 1x,url(images/pic@2x.png) 2x);
} 
/*其中@2x.png为后缀的图片就是为Retina准备的*/

或

<img src="pic.png" srcset="pic@2x.png 2x" />

网页元素宽度高度有半个像素的概念【作者：唐霜】

在我们以往的前端经验中，px为单位的长度【本文首发于唐霜的博客】原创内容，盗版必究。没有办法再进行切割，我们在css中写12【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。.5px这样的写法是没有效果的，因为传统【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】屏幕中一个px就是一个px，没有0.5p【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。x的概念。这是由传统屏幕的性质决定的，一未经授权，禁止复制转载。未经授权，禁止复制转载。个物理像素和一个逻辑像素是一一对应的。但【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net是四个物理像素模拟一个物理像素的高分辨率转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。屏出现后，这种特性被打破。当一个网页元素未经授权，禁止复制转载。原创内容，盗版必究。的宽度或高度不是整数，而出现小数位长度的转载请注明出处：www.tangshuang.net原创内容，盗版必究。时候，就会出现我文章开头的情况。文章开头原创内容，盗版必究。【作者：唐霜】所说的那条白线，是因为我的元素高度出现了著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。0.09px，因此，四个像素组成的一个逻本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net辑像素中，上面两个像素被渲染为黑色，而下【作者：唐霜】【关注微信公众号：wwwtangshuangnet】面两个像素并没有被渲染，从而下面两个像素未经授权，禁止复制转载。【未经授权禁止转载】组成的一条线就呈现为一条白色亮线，从逻辑【原创内容，转载请注明出处】【作者：唐霜】上讲，它仅高0.5px。

@解决思路：未经授权，禁止复制转载。

避免小于0.5px单位的长度出现，当长度【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。大于0.5px的时候，就会完全占满四个物【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。理像素组成的一个逻辑像素。因此，尽可能在著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net一些颜色与邻近元素对比度大的元素中，采用转载请注明出处：www.tangshuang.net【作者：唐霜】绝对长度单位px，而不使用% em re未经授权，禁止复制转载。原创内容，盗版必究。m pt等非绝对长度单位。不过，Reti著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.netna屏为更小精度的定位提供了可能，你甚至转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。可以采用0.4px这样的方法来专门为Re【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。tina屏进行一些适配。

元素变小，错位【本文首发于唐霜的博客】

这应该不属于Retina屏造成的直接结果【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。，因为所有高分辨率的屏幕，都会使得我们在本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。普通分辨率下看上去正常的尺寸变的比较小。【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。比如在我们一般的14寸笔记本电脑屏幕上，【本文受版权保护】【本文首发于唐霜的博客】我们通常用1000px左右作为网页固定宽【原创内容，转载请注明出处】【作者：唐霜】度的网站，到了高分辨率屏幕下，就向在宽敞【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。的屏幕中间挂了一条门联一样，感觉相似上个【本文受版权保护】本文作者：唐霜，转载请注明出处。世纪遗留下来的网站，让高分辨率屏幕的使用原创内容，盗版必究。未经授权，禁止复制转载。者站在鄙视链的顶端。为了迎合这种变化，一【转载请注明来源】【关注微信公众号：wwwtangshuangnet】些网站开发者并不固定宽度，而是采用百分比本文版权归作者所有，未经授权不得转载。【作者：唐霜】的形式来进行开发和定位，结果也是徒然的，著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net由于分辨率高的情况下，一行可以容纳更多文本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。字，传统屏幕上显示3行文本，显得很美观，转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】而在此屏幕上则一行就显示完了，其丑无比。【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】整个界面就像是被程序员恶作剧般，乱的一塌著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。糊涂。

@解决思路：【转载请注明来源】

采用屏幕适配来为不同宽度的屏幕显示不同的著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。效果。一般而言，能够采用retina屏的【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。电脑，都已经升级到高版本的系统，自带的浏本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。览器版本也比较高，都支持html5的特性【本文受版权保护】【关注微信公众号：wwwtangshuangnet】，因此，我们在设计制作网页的时候，需要专【原创不易，请尊重版权】【未经授权禁止转载】门为这帮高端用户设计多余的页面元素，使用【本文首发于唐霜的博客】【未经授权禁止转载】responsive css的方法，展示【转载请注明来源】【本文首发于唐霜的博客】给他们更多的内容，从而保证在高分辨率屏幕著作权归作者所有，禁止商业用途转载。【本文受版权保护】上和普通分辨率屏幕上都能很好的显示。

2015-11-01 7250