依照Taobao弹性布局方案lib-flexible的标题研究

上篇小说《天猫弹性布局方案lib-flexible实践》结合一个不难易行的实例,表明了lib-flexible的基本用法,不过lib-flexible的那种适配格局在适配的时候会修改viewport的initial-scale,导致viewport的width不对等device
width,使得那么些依据width编写的media
query不必然与预期的一样,还有移动web经典的retina屏图片难题和1px边框难题在lib-flexible下也会与普通的做法具有区别,本文的情节正是切磋那一个东西,并建议有些自个儿探讨和缓解办法。

上篇小说《天猫商城弹性布局方案lib-flexible实践》结合一个简约的实例,表达了lib-flexible的主导用法,不过lib-flexible的那种适配格局在适配的时候会修改viewport的initial-scale,导致viewport的width不对等device
width,使得那个根据width编写的media
query不自然与预期的同样,还有移动web经典的retina屏图片问题和1px边框难题在lib-flexible下也会与平时的做法持有差别,本文的情节正是商讨那些东西,并建议有个别和好思考息争决方式。

1. lib-flexible不能够与响应式布局包容

先说说响应式布局的有的为主认识:

响应式布局的显现是:网页通过css媒介查询判断可视区域的上升幅度,在差别的限定使用分裂的体裁,以便在差异尺寸的设施上显现最好的界面效果。典型的例证是,有3个商品列表页,应用响应式布局后,恐怕在pc上是用4列展现,在平板上用3列显示,在表弟大上只用1列展现。那种布局的最大利益正是节省人力、能源和岁月,所以众多商厦都欢悦用。而响应式布局有三个必须的渴求:

1)是viewport的装置,width跟initial-scale要选拔如下配置,保险viewport的升幅与device
width相同:

<meta name="viewport" content="width=device-width, initial-scale=1">

2)是要使用media
query,针对不一致的width范围,编写区别的css,比如bootstrap:

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

需求注意的是:第(1)个供给涉嫌的device width与media
query里面的device-width属性表明的意味某个区别:第(1)个需要涉嫌的device
width在运动装备下指的是设备的上涨幅度,不过在pc下指的是浏览器可视区域的增进率,比如上边那个网页,小编把浏览器窗口裁减,然后你看它viewport里就算已经把width设置成了device-width,可是网页大小却不是自个儿的桌面包车型大巴分辨率宽度(设备宽度):

bet体育在线 1

media
query里的device-width属性,始终指的是设备的宽度。所以响应式布局的媒介查询要用width属性,不用device-width属性,因为在桌面设备下,把浏览器窗口减少的时候,device-width并不会生出转移,当调整浏览器窗口大小就看不到响应式的职能。

再来看lib-flexible的特点:

lib-flexible在适配的时候会修改viewport的initial-scale,导致viewport的width不对等device
width。那是应用lib-flexible,在iphone6
plus下适配后,自动抬高的viewport设置代码:

<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">

在那几个viewport的成效下,网页的缩放周全为0.3333333333333333,iphone6
plus的device
width为417个不缩放的css像素,经过缩放之后,viewport的width等于device
width / 0.3333333333333333,为12四十二个缩放后的css像素,远远超过device
width:

bet体育在线 2

若是你的网页想同时利用响应式布局和lib-flexible,然后您写了三个媒婆查询,供给在1024px之上的分辨率(桌面设备)显示有些特殊体制(代码仅仅是为了举例):

@media only screen and (min-width: 1024px) {
    body {
        border: 10px solid #ccc;
    }
}

会发觉那一个页面在iphone6 plus下也会接纳到该媒介查询的体制:

bet体育在线 3

究其原因是:iphone6
plus下的网页由于lib-flexible的效益,导致页面包车型地铁width与事实上物理分辨率的宽相等,也正是12肆十七个像素,完全达到了该媒介查询的范围。

为此,在利用lib-flexible的品类里很难再落实响应式布局,借使有人有那种综合两者一起利用的想法,可得注意了。实际上,那多少个方案本质性的东西就不平等,适用的场合也不均等。响应式布局的指标是一套代码,能够在手提式有线电话机平板和pc上都能好好表现,适用于网站类的类型,而lib-flexible消除的是手提式有线电话机端网页的适配难题,压根不管平板和pc的事态,适用于web
app类的项目。

1. lib-flexible无法与响应式布局包容

先说说响应式布局的一对中坚认识:

响应式布局的显示是:网页通过css媒介查询判断可视区域的上涨幅度,在不一致的限定使用分歧的样式,以便在不一致尺寸的装备上呈现最棒的界面效果。典型的事例是,有三个商品列表页,应用响应式布局后,恐怕在pc上是用4列显示,在机械上用3列呈现,在大哥伦比亚大学上只用1列体现。那种布局的最大好处正是节约人力、财富和岁月,所以重重商家都欢快用。而响应式布局有多个必须的渴求:

1)是viewport的安装,width跟initial-scale要运用如下配置,保障viewport的幅度与device
width相同:

<meta name="viewport" content="width=device-width, initial-scale=1">

2)是要选拔media
query,针对不一样的width范围,编写不一致的css,比如bootstrap:

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

亟待留意的是:第(1)个供给涉嫌的device width与media
query里面包车型客车device-width属性表达的意思有些差别:第(1)个须要涉嫌的device
width在移动设备下指的是装备的升幅,不过在pc下指的是浏览器可视区域的增进率,比如上边那么些网页,笔者把浏览器窗口缩短,然后你看它viewport里纵然已经把width设置成了device-width,但是网页大小却不是自家的桌面包车型地铁分辨率宽度(设备宽度):

bet体育在线 4

bet体育在线,media
query里的device-width属性,始终指的是装备的小幅度。所以响应式布局的媒人查询要用width属性,不用device-width属性,因为在桌面设备下,把浏览器窗口收缩的时候,device-width并不会发出改变,当调整浏览器窗口大小就看不到响应式的效率。

再来看lib-flexible的特点:

lib-flexible在适配的时候会修改viewport的initial-scale,导致viewport的width不对等device
width。那是运用lib-flexible,在iphone6
plus下适配后,自动抬高的viewport设置代码:

<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">

在这几个viewport的功能下,网页的缩放周密为0.3333333333333333,iphone6
plus的device
width为415个不缩放的css像素,经过缩放之后,viewport的width等于device
width / 0.3333333333333333,为12四十四个缩放后的css像素,远远超越device
width:

bet体育在线 5

如若你的网页想同时选用响应式布局和lib-flexible,然后你写了一个媒婆查询,要求在1024px之上的分辨率(桌面设备)显示某些特殊体制(代码仅仅是为着举例):

@media only screen and (min-width: 1024px) {
    body {
        border: 10px solid #ccc;
    }
}

会发觉这些页面在iphone6 plus下也会利用到该媒介查询的样式:

bet体育在线 6

究其原因是:iphone6
plus下的网页由于lib-flexible的机能,导致页面包车型地铁width与实际物理分辨率的宽相等,也正是12肆12个像素,完全达到了该媒介查询的范围。

从而,在应用lib-flexible的类型里很难再落到实处响应式布局,要是有人有那种归纳两者联手行使的想法,可得注意了。实际上,那多少个方案本质性的事物就不等同,适用的场馆也差别等。响应式布局的目标是一套代码,能够在手提式有线话机平板和pc上都能完美表现,适用于网站类的种类,而lib-flexible解决的是手提式有线电话机端网页的适配难题,压根不管平板和pc的景况,适用于web
app类的类型。

2. 1px边框在lib-flexible下如何处理

web
app有时候会规划出一部分特别细的线条依旧边框,如果我们一向通过css设置边框为1px:

border: 1px solid #ccc;

结果会发觉那种边框在手提式有线电电话机里看起来的成效,显得尤其地粗,之所以会有其一效应,原因很不难,因为以往多数部手提式有线电话机的分辨率很高,贰个css像素,比如上边代码中的1px,大概约等于二个甚至一个大体分辨率像素,而不像pc,二个css像素始终等于一个大体分辨率像素,所以手提式有线电话机里见到的1px会比实际的粗。

为了缓解那些题材,你恐怕会想到用0.5px来代替1px,可是那么些是消除不了难题的,而且带小数的像素在差别的浏览器下相对是一个坑,千万要尽量防止。

那么普通在web
app下显得1px的做法是怎么着的呢,前阵子在weui的源码中看到了3个很好的形式,值得享受:

//这是一个mixin,用来设置顶部的边框,其它方向的代码没有贴出
.setTopLine(@c: #C7C7C7) {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    border-top: 1px solid @c;
    transform-origin: 0 0;
    transform: scaleY(0.5);
}

//应用举例
.weui_cell {
    // onepx
    position: relative;
    &:before {
        .setTopLine(@weuiCellBorderColor);
    }
}

以此艺术并不是行使border属性来显示边框,而是接纳了伪类和transform,最妙的是其一transform,0.5px办不到的政工,它却办得到。

鉴于lib-flexible在适配的时候,会缩放网页,导致css代码中的1px等于物理分辨率的1px,那样子这几个1px边框的难点在经过lib-flexible适配的装备下就很好消除了,直接利用border:
1px
solid;即可。然则lib-flexible以往只适配了iphone设备,安卓设备压根没适配

bet体育在线 7

导致在安卓配备下,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做测试的截图:

bet体育在线 8

第叁根线是地点的mixin效果;第一根线是直接接纳border: 1px solid的遵循。

注:以上关联的那么些1px边框的做法有多少个缺陷,在行使的时候供给留意:

1)它会占据掉before伪类

2)没办法做圆角

3)很难达成多条边框,除非嵌套,可能再接纳上after伪类。

就算,以上那些做法照旧那些有效的做法,因为那种细线边框属于比较特殊的统一筹划供给,并不是每处边框都得做成那样,在支付webapp的时候用那几个艺术保险新鲜线条的陈设性供给,其余的边线,作者认为直接用border并从未提到,你能够平昔用你的无绳电话机打开bootstrap的法定页面,看它在那之中的按钮边框,效果都还不易。

2. 1px边框在lib-flexible下怎么着处理

web
app有时候会规划出一部分特意细的线条依然边框,如若大家直接通过css设置边框为1px:

border: 1px solid #ccc;

结果会意识那种边框在手提式无线电话机里看起来的成效,显得特别地粗,之所以会有那个意义,原因很简短,因为前几天津高校部分有线电话的分辨率很高,二个css像素,比如下边代码中的1px,或者相当于二个甚至一个大体分辨率像素,而不像pc,贰个css像素始终等于三个大体分辨率像素,所以手提式有线电电话机里见到的1px会比实际的粗。

为了消除这几个标题,你只怕会想到用0.5px来替代1px,不过那几个是消除不了难点的,而且带小数的像素在差别的浏览器下绝对是1个坑,千万要尽量制止。

那就是说一般在web
app下显得1px的做法是怎么样的吗,前阵子在weui的源码中观察了2个很好的方法,值得享受:

//这是一个mixin,用来设置顶部的边框,其它方向的代码没有贴出
.setTopLine(@c: #C7C7C7) {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    border-top: 1px solid @c;
    transform-origin: 0 0;
    transform: scaleY(0.5);
}

//应用举例
.weui_cell {
    // onepx
    position: relative;
    &:before {
        .setTopLine(@weuiCellBorderColor);
    }
}

其一措施并不是运用border属性来突显边框,而是选用了伪类和transform,最妙的是其一transform,0.5px办不到的政工,它却办获得。

由于lib-flexible在适配的时候,会缩放网页,导致css代码中的1px对等物理分辨率的1px,那样子这些1px边框的题材在经过lib-flexible适配的设施下就很好化解了,直接行使border:
1px
solid;即可。可是lib-flexible未来只适配了iphone设备,安卓设备压根没适配

bet体育在线 9

造成在安卓设备下,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做测试的截图:

bet体育在线 10

第②根线是地点的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下显得模糊的题材,基本都以利用那种做法:

.css{/* 普通显示屏(设备像素比例小于等于1.3)使用1倍的图 */ 
    background-image: url(img_1x.png);
}
@media only screen and (-webkit-min-device-pixel-ratio:1.5){
.css{/* 高清显示屏(设备像素比例大于等于1.5)使用2倍图  */
    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难题的方法,供给调动一下才能适用于明天:

.css{/* 普通显示屏(设备像素比例小于等于2)使用2倍的图 */ 
    background-image: url(img_2x.png);
}
@media only screen and (-webkit-min-device-pixel-ratio:2.1){
.css{/* 高清显示屏(设备像素比例大于等于2.1)使用3倍图  */
    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的图。

本条点子,在chrome的模拟器里测试过众多机型,效果不错,只是它只适用于不利用Pepsi-Cola图的背景图片,假设要在lib-flexible的品类里使用Coca Cola图作背景图片,同时又要考虑retina屏的话,要求将上面那个点子有些改变一下。

先是看下不选取lib-flexible时,7-Up图背景在retina下是咋办的,以腾讯的二个移动页面来证实http://qzs.qq.com/qzone/qzact/act/qzapp/qzone5.0/mobile/index.html,这是它在接纳1x的Coca Cola图时有个别成分的background的样式:

bet体育在线 11

这是它在选择2x的Coca Cola图时有个别成分的background的样式:

bet体育在线 12

小结下它这几个做法:

1)先把设计稿切出的图,合并成一张7-Up图,腾讯那一个例子的设计稿是320的,所以它的切图都是1x的,那张Pepsi-Cola图也正是1x的,大小为643
* 152

2)设计稿放大2倍,切图合并成一张2x的Pepsi-Cola图,大小为1286 * 304

3)普清屏下只使用background-image和background-position属性,设置1xCoca Cola图作为背景,代码参考截图

4)高清屏下除了采用background-image和background-position属性,还要采用background-size属性,并且这一个background-size的轻重缓急要设置为1x百事可乐图的大大小小,background-position的值要与(3)里计划的值相同,代码参考截图。

若是把它做成二个mixin的话应该是看似这样的:

.retina-image(@background-image,@background-pos-x,@background-pos-y,@background-size-x,@background-size-y) {
  background-image: url("../img/@1x/@{background-image}?v=@@version");
  background-position:@background-pos-x @background-pos-y;

  @media only screen and (-webkit-min-device-pixel-ratio: 1.25),
  only screen and (min-resolution: 120dpi),
  only screen and (min-resolution: 1.25dppx) {
    & {
      background-size: @background-size-x @background-size-y;
      background-image: url("../img/@2x/@{background-image}?v=@@version") !important;
    }
  }
  //1dppx = 1devicePixelRatio, 1dppx = 96dpi.
}

考虑到1x不会再有的景况,下边那么些mixin能够再调动一下:

.retina-image(@background-image,@background-size-x,@background-size-y,@background-pos-x,@background-pos-y) {
  background-image: url("../img/@2x/@{background-image}?v=@@version");
  background-size: @background-size-x @background-size-y;
  background-position:@background-pos-x @background-pos-y;

  @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.
}

暗中同意用2x的图,devicePixelRatio大于等于2.5的设备用3x的图。那个调整后的mixin便是lib-flexible下,使用Coca Cola图背景的艺术,应用举例:

@font-size-base: 75;
.btn-android {
  .retina-image("sprite.png", 414rem/@font-size-base, 232rem/@font-size-base, 0, -64rem/@font-size-base);
}

sprite.png用750设计稿的切图合并后的深浅是414 *
232,.btn-android那么些按钮的position为0 –64px。

就算这几个方法看起来完美,不过不建议利用,因为它的适配效果倒霉,那是iphone6下的效率:

bet体育在线 13看起来不错,那是本来的,因为那就是它暗中认可没有此外缩放的机能。然后看iphone6
plus的功效:

bet体育在线 14稍稍异样,但看似还是能够承受。再看看nexus6的职能:

bet体育在线 15这就不可能忍了,样式差的失误。造成那几个距离的原委也相当粗略,正是rem的副作用,腾讯的页面里富有position,size都以不带小数的数值,而且2x跟1x里面是整数的翻倍,而不是3x跟2x以内的1.5倍,lib-flexible会导致超越52%的装备下position和size都以小数数值,所以很难保险背景图片缩放后仍是可以通过position突显到正确的地方:

bet体育在线 16

从网页优化的角度来说,收缩请求数,裁减请求数据大小是五个基本的思路,7-Up图就是三个压缩请求数但是不可能压缩请求数据量的法子。lib-flexible不可能应用包容3x屏的七喜图的意况看起来是它2个大的弱点,但其实也并非如此:雪碧图假设用持续,就应用其余思路来优化,小编能想到的更好的正是图表的延期加载和懒加载,在app页面里决定好默许只加载首屏的图形,并且动用延迟和懒加载的艺术,防止阻塞页面包车型大巴加载,也能有极好的用户体验,打开手提式有线电话机天猫的页面给人的痛感就是那般,而且你去看看手提式有线话机天猫商城的使用会意识它根本就从未用Sprite图,然而速度依旧相当的慢。

3. lib-flexible什么处理retina屏下的background-image

几年在此之前,retina屏,也便是所谓的高清屏,还不像后天那样大面积,12年本身买的第三个安卓机是金立u8825d,分辨率唯有480*800,而且当时市面上海高校部分安卓机基本上都是其一分辨率,像iphone4
那种640*960级别的对讲机很少,为了缓解一般背景图片在iphone4下显得模糊的题材,基本都以行使那种做法:

.css{/* 普通显示屏(设备像素比例小于等于1.3)使用1倍的图 */ 
    background-image: url(img_1x.png);
}
@media only screen and (-webkit-min-device-pixel-ratio:1.5){
.css{/* 高清显示屏(设备像素比例大于等于1.5)使用2倍图  */
    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难点的法门,必要调动一下才能适用于前几日:

.css{/* 普通显示屏(设备像素比例小于等于2)使用2倍的图 */ 
    background-image: url(img_2x.png);
}
@media only screen and (-webkit-min-device-pixel-ratio:2.1){
.css{/* 高清显示屏(设备像素比例大于等于2.1)使用3倍图  */
    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来体现不一致的图样的做法是不当的,因为有点安卓机,比如本人的Samsungnode,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的图。

那一个主意,在chrome的模拟器里测试过无数机型,效果不错,可是它只适用于不利用Coca Cola图的背景图片,倘若要在lib-flexible的品类里选拔Coca Cola图作背景图片,同时又要考虑retina屏的话,要求将方面这么些措施某个改变一下。

首先看下不行使lib-flexible时,7-Up图背景在retina下是怎么办的,以腾讯的一个活动页面来验证http://qzs.qq.com/qzone/qzact/act/qzapp/qzone5.0/mobile/index.html,那是它在行使1x的7-Up图时某些成分的background的样式:

bet体育在线 17

那是它在使用2x的Pepsi-Cola图时有些成分的background的样式:

bet体育在线 18

小结下它这些做法:

1)先把设计稿切出的图,合并成一张Coca Cola图,腾讯这一个例子的设计稿是320的,所以它的切图都以1x的,那张7-Up图也等于1x的,大小为643
* 152

2)设计稿放大2倍,切图合并成一张2x的七喜图,大小为1286 * 304

3)普清屏下只使用background-image和background-position属性,设置1xCoca Cola图作为背景,代码参考截图

4)高清屏下除了使用background-image和background-position属性,还要选取background-size属性,并且这么些background-size的尺寸要设置为1×7-Up图的深浅,background-position的值要与(3)里安插的值相同,代码参考截图。

一旦把它做成三个mixin的话应该是近乎那样的:

.retina-image(@background-image,@background-pos-x,@background-pos-y,@background-size-x,@background-size-y) {
  background-image: url("../img/@1x/@{background-image}?v=@@version");
  background-position:@background-pos-x @background-pos-y;

  @media only screen and (-webkit-min-device-pixel-ratio: 1.25),
  only screen and (min-resolution: 120dpi),
  only screen and (min-resolution: 1.25dppx) {
    & {
      background-size: @background-size-x @background-size-y;
      background-image: url("../img/@2x/@{background-image}?v=@@version") !important;
    }
  }
  //1dppx = 1devicePixelRatio, 1dppx = 96dpi.
}

考虑到1x不会再有的情况,上边这几个mixin能够再调整一下:

.retina-image(@background-image,@background-size-x,@background-size-y,@background-pos-x,@background-pos-y) {
  background-image: url("../img/@2x/@{background-image}?v=@@version");
  background-size: @background-size-x @background-size-y;
  background-position:@background-pos-x @background-pos-y;

  @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.
}

私下认可用2x的图,devicePixelRatio大于等于2.5的设施用3x的图。这几个调整后的mixin就是lib-flexible下,使用Pepsi-Cola图背景的法子,应用举例:

@font-size-base: 75;
.btn-android {
  .retina-image("sprite.png", 414rem/@font-size-base, 232rem/@font-size-base, 0, -64rem/@font-size-base);
}

sprite.png用750设计稿的切图合并后的高低是414 *
232,.btn-android这么些按钮的position为0 –64px。

固然这几个办法看起来完美,但是不建议使用,因为它的适配效果倒霉,那是iphone6下的功效:

bet体育在线 19看起来不错,那是自然的,因为那正是它默许没有其他缩放的功效。然后看iphone6
plus的功效:

bet体育在线 20有个别出入,但类似还是能经受。再看看nexus6的法力:

bet体育在线 21这就无法忍了,样式差的失误。造成这么些出入的来由也很不难,正是rem的副成效,腾讯的页面里装有position,size都是不带小数的数值,而且2x跟1x中间是整数的翻倍,而不是3x跟2x之间的1.5倍,lib-flexible会导致大部分的设施下position和size都以小数数值,所以很难保障背景图片缩放后还能够因此position展现到正确的职位:

bet体育在线 22

从网页优化的角度来说,收缩请求数,缩小请求数据大小是七个着力的思绪,七喜图正是三个调整和裁减请求数可是不可能减小请求数据量的章程。lib-flexible不能够动用包容3x屏的七喜图的图景看起来是它一个大的弱项,但实际上也并非如此:百事可乐图假设用持续,就选拔其余思路来优化,作者能想到的更好的正是图表的推移加载和懒加载,在app页面里决定好默许只加载首屏的图形,并且使用延迟和懒加载的办法,制止阻塞页面包车型地铁加载,也能有极好的用户体验,打开手机天猫的页面给人的感觉到正是那般,而且你去探望手提式有线电话机天猫商城的施用会意识它根本就一向不用七喜图,可是速度依旧不慢。

4. 结束语

本文主要商讨了lib-flexible与响应式布局,1px边框和retina屏里背景图片适配的题材,希望能对你利用lib-flexible有所补助,文中提议的章程不肯定是最佳的措施,而且可能还有遗漏的情景未考虑到,越发是最后的背景图片难点,仅仅是webapp里图片处理的2个微小分支,有不规则的地点,请您多多指正!

谢谢阅读:)

4. 结束语

正文首要钻探了lib-flexible与响应式布局,1px边框和retina屏里背景图片适配的题目,希望能对您利用lib-flexible有所帮忙,文中建议的方法不肯定是最棒的法子,而且说不定还有遗漏的场馆未考虑到,尤其是最后的背景图片难题,仅仅是webapp里图片处理的叁个细小分支,有畸形的地点,请你多多指正!

感谢阅读:)

相关文章