由于lib-flexible在适配的时候，会缩放网页，导致css代码中的1px等于物理分辨率的1px，这样子这个1px边框的问题在经过lib-flexible适配的设备下就很好解决了，直接应用border: 1px solid；即可。但是lib-flexible现在只适配了iphone设备，安卓设备压根没适配：

导致在安卓设备下，1px的边框问题依然存在。所以为了在lib-flexible的项目里解决1px的问题，就得综合两种做法了：

.setTopLine(@c: #C7C7C7) { & { position: relative; } &:before { content: " "; position: absolute; left: 0; top: 0; width: 100%; height: 1px; border-top: 1px solid @c; } [data-dpr="1"] &:before { transform-origin: 0 0; transform: scaleY(0.5); } } /*照着这个可以再写setBottomLine等相关mixin*/

这个做法，我做过测试，在我devicePixelRatio为3的meilan note上，显示出的线条非常细腻，看起来很舒服，iphone的效果也不错，借别人的机子测试过，所以有兴趣的人可以借鉴使用，有问题尽管提出，看看能不能有更好的办法解决。这是我用魅蓝note做测试的截图：

第1根线是上面的mixin效果；第二根线是直接使用border: 1px solid的效果。

注：以上提到的这个1px边框的做法有三个缺点，在使用的时候需要注意：

1）它会占用掉before伪类

2）没法做圆角

3）很难实现多条边框，除非嵌套，或者再利用上after伪类。

尽管如此，以上这个做法还是非常有用的做法，因为这种细线边框属于比较特殊的设计要求，并不是每处边框都得做成这样，在开发webapp的时候用这个方法保证特殊线条的设计要求，其它的边线，我觉得直接用border并没有关系，你可以直接用你的手机打开bootstrap的官方页面，看它里面的按钮边框，效果都还不错。

3. lib-flexible如何处理retina屏下的background-image

几年之前，retina屏，也就是所谓的高清屏，还不像现在这么普遍，12年我买的第一个安卓机是华为u8825d，分辨率只有480*800，而且当时市面上大部分安卓机基本上都是这个分辨率，像iphone4 那种640*960级别的机子很少，为了解决普通背景图片在iphone4下显示模糊的问题，基本都是采用这种做法：

background-image: url(img_1x.png); } @media only screen and (-webkit-min-device-pixel-ratio:1.5){ .css{ background-image: url(img_2x.png); } }

估计当时应该是320的设计稿，img_1x.png是在320设计稿下切出的图，然后img_2x.png是在320设计稿矢量放大2倍后切出的图，高清屏显示img_2x.png，这样就能解决当时iphone4背景图片模糊的问题。

时至今日，手机都是走高配置，低价格的发展路线，480*800这种级别的机子，市面上越来越少，大部分手机的分辨率级别都达到了iphone4的标准，比iphone4的清晰级别更高的手机也越来越多，一个800块的魅蓝note，它的devicePixelRatio都已经达到了3，原先解决background-image问题的方法，需要调整一下才能适用于现在：

background-image: url(img_2x.png); } @media only screen and (-webkit-min-device-pixel-ratio:2.1){ .css{ background-image: url(img_3x.png); } }

代码中的2x和3x是相当于320的设计稿而言的，2x代替了原先的1x，3x代替了原先的2x。现在的设计稿也不再是320，而是640，2x就是在640下切出的图，3x是在640基础上矢量放大1.5切出的图。在这个代码的作用下，分辨率在640以下的设备都会显示2x的图，由于2x的图本身是在640的设计稿切出的，所以这些设备下不会有模糊的现象，在640以上的分辨率，会显示3x的图，由于3x的图是在960的分辨率下切出的，所以这种图在分辨率小于960的设备下都不会模糊。以前1x的情况根本不用再考虑了，以后不会再有需要1x图的设备，说不定过几年，市面上的手机全是devicePixelRatio在2.5以上的标准时，连2x的情况也不用考虑了。

lib-flexible在iphone6推出之后，把设计稿的尺寸提高到了750，切图时还是按2x和3x的方法来切，这样的话，经过lib-flexible适配的设备，分辨率在750以下都会显示2x的图，肯定不会模糊；分辨率在750以上的设备，会显示3x的图，也不会出现模糊。不过由于lib-flexible只适配了iphone的问题，所以我上篇博客中提到的用data-dpr来显示不同的图片的做法是错误的，因为有些安卓机，比如我的魅族node，devicePixelRatio是3，打开app页面，看到的图片却仍然还是2x的，显然达不到适配的要求，所以不能用data-dpr去适配，而应该采用下面这个做法：

.retina-image(@background-image) { background-image: url("../img/@2x/@{background-image}?v=@@version"); background-size: 100% 100%; background-position:left top; @media only screen and (-webkit-min-device-pixel-ratio: 2.5), only screen and (min--moz-device-pixel-ratio: 2.5), only screen and (-o-min-device-pixel-ratio: 5/2), only screen and (min-device-pixel-ratio: 2.5), only screen and (min-resolution: 240dpi), only screen and (min-resolution: 2.5dppx) { & { background-image: url("../img/@3x/@{background-image}?v=@@version") !important; } } //1dppx = 1devicePixelRatio, 1dppx = 96dpi. }

这个代码的最终效果是：

1）devicePixelRatio大于等于2.5的设备都会应用到3x图

2）其它设备都会应用到2x的图。