关于背景图片的,App自适应布局探索与统计

雪碧图在缩放场景下的例外处理

2016/07/13 · CSS ·
雪碧图

原文出处: 百度EFE   

回首n年前刚写前端的时候,在拍卖一个’鼠标hover切换背景图会闪’的标题时,将两张背景图合成一张图纸,顺遂解决难题。那应该是自我首回用到Pepsi-Cola图的场地。

亚洲必赢官网 1

Pepsi-Cola图作为背景在切换时不会有因为急需等待下载而暴发的闪现

现今,打开一个站点,显示各个的图纸资源的页面遍地可知。而大部分站点更会用一套包括几十个作风统一的图标的图标库,加之运动端的占比比比皆是,Pepsi-Cola图那项技艺被利用的就越是广阔。

1、烦扰多时的难点

偶尔会遭受使用背景图仍旧图片的难题。

  • 背景图:固定不变的情节,要求选择div标签来包裹内容
  • 图表:img 标签的 src
    属性值时后端给的。一般用来可变的(如头像),可点击的。

亚洲必赢官网 ,一般的话,使用到背景图片,会涉嫌到如下 CSS 样式:

  • background-image: url();/背景图的门道/
  • background-position: left top | center;/偏移地方/
  • background-size: contain | cover | width height;/背景图尺寸/
      cover:图片完全覆盖容器(图片可能溢出)。
      contain:容器包裹图片(图片可能不可能完全覆盖容器)。
    background-size: 100px 80px;背景图宽度100px,中度80px
  • background-repeat: no-repeat | repeat-x | repeat-y;/背景图重复性/
  • background-attachment: fixed | scroll;
    规定背景图像是还是不是稳定或者趁着页面的其余部分滚动。

日前做事中创制活动端活动页面的时候,由于图片较多,由此一再使用到CSS
Pepsi-Colas,此时会遇到了一个科普问题——在不一样分辨率下,background-position定位的图形的边缘有可能被裁剪,突显不全。

最简单易行,最实用的使用方法

得益于伪元素的功绩,在不破坏页面结构,不扩展多余标签的事态下,通过::after创设一个您所急需图标大小的伪元素,并将所急需的图标通过background-position定位到指定的上空,对应的图标变顺遂地表现出来。

CSS

.message:after { background: url(../img/sprite.png) scroll 0px -86px
no-repeat transparent; content: ”; text-indent: -9999px; overflow:
hidden; position: absolute; top: 0; left: 50%; margin-left: -10px;
width: 20px; height: 22px; }

1
2
3
4
5
6
7
8
9
10
11
12
.message:after {
    background: url(../img/sprite.png) scroll 0px -86px no-repeat transparent;
    content: ”;
    text-indent: -9999px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -10px;
    width: 20px;
    height: 22px;
}

亚洲必赢官网 2

经过伪元素完成的图标

在那前边做Web
App开发的的时候,在自适应方面一般都是开间通过比例,高度以金立6跟Motorola5之间的一个平衡值写死,我们的设计稿都是摩托罗拉5的640
*
1136正式,所以中度相似取个大致值,各样图标的宽高也是取平衡值写死,然后部分样式经过媒体询问来设置,例如背景图的多倍图、基础字体大小、图标宽高。

CSS sprite 雪碧图

在线制作Pepsi-Cola图
  因为一个图纸作为logo或者icon体现时,每一个url,会在页面渲染时发送一条互连网请求(浪费网络资源),所以把这一个较小的logo放在同样张图纸上,再经过background-position来进展固化。(这样就只发送四次呼吁)。
  background-position 使用时和 margin
类似。top使用负值可以把背景图上拉。
  最终,还有一种裁减互连网请求的主意:把小图标转换为based64的字符。(图片—->数据,实时性好有的)

相对而言两种CSS Coca Colas的适配方法

近期为止,我精晓并尝试过的适配方法有如下二种:

  • rem
  • 百分比
  • 关于背景图片的,App自适应布局探索与统计。zoom
  • transform scale

由此创设demo,大家对一张CSS
Sprites进行展现,通过上述二种方法,在iphone6下就涌出了图片体现不全的问题(红框中的图片的边缘被裁剪),如下图:

亚洲必赢官网 3

各适配方法结果相比较

出于rem、百分比单位最后都会被浏览器解析成px进行渲染,分辨率不一样变化的px值一般会存在小数点,而浏览器对小数点的辨析也分化。IE7-和safari会对小数点取整,而IE8+、chrome、firefox等浏览器则会四舍五入。由此浏览器对rem、百分比单位转换成px时,很简单因为1px的差而招致CSS
Coca Colas定位不准而致使边缘被裁剪的场地。

在过去的类型中,用得最多的是比例,其精度相对于rem较好点,出现图标被裁剪的景况较少。不过在这几个序列中,利用百分比照旧不如人意。

比例定位参考小说:http://zhangruojun.com/backgroud-positionde-bai-fen-bi-zhi/?utm\_source=tuicool&utm\_medium=referral

未来尝试了应用zoom的法门,直接对图标举办缩放,效果却和rem几乎。

一部分标题

看上去貌似是一个周全的化解方案,但是真正是这么么?大家来看一个例证:

亚洲必赢官网 4

一个界面

此时此刻有那般一个简单易行的页面(无视它的筹划合理吧),得到手后撸起袖子就写。切图切着切着貌似哪儿不对。。。恩!七个铃铛不是同一个图片大小不同而已么?分明有优化的后路啊!只要切一个图来个调整下尺寸不就迎刃而解了么~~

恩恩恩。在经常的页面中,来个backgroud-size妥妥地解决。

CSS

.message { background: url(../img/message.png) no-repeat; } .large {
background-size: 64px 64px; } .normal { background-size: 32px 32px; }
.small { background-size: 16px 16px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.message {
    background: url(../img/message.png) no-repeat;
}
 
.large {
    background-size: 64px 64px;
}
 
.normal {
    background-size: 32px 32px;
}
 
.small {
    background-size: 16px 16px;
}

当我们根据地把质量设置到Coca Cola图上时,可以发现,彰显出的功用完全不是前面设想的那么。尺寸、定位完全不对。何地出了难点了呢?原理很粗略。background-size并不感知icon的存在,大家想只针对icon进行布局,而以此特性其实是职能于全部百事可乐图上的。

那般做的弊病很明确:

rem和zoom的化解方案

针对地点的rem和zoom方法的化解方案是,制作CSS
百事可乐时图标之间相隔远一些,css中图标尺寸设置大一些,background-position的值相对原值小一些。
比如说,正常设置如下:

// rem
.icon{
      width: 0.2rem;
      height: 0.2rem;
      background-position: -1rem -0.8rem;
}

// zoom
.icon{
      width: 20px;
      height: 20px;
      background-position: -100px -80px;
}

使用解决方案后的安装如下:

// rem
.icon{
      width: 0.24rem;
      height: 0.24rem;
      background-position: -0.98rem -0.78rem;
}

// zoom
.icon{
      width: 24px;
      height: 24px;
      background-position: -98px -78px;
}

效益图如下,基本上解决了图标被裁剪的题材:

亚洲必赢官网 5

不过上述解决方案,我认为在代码上连接要想着时刻加减原值,而且前期维护的时候如果忽视了该解决措施,很不难又会油然则生上述难题。其余,在页面布局上,图标在页面中的地点简单并发1px的过错,在要素布局的时候也急需小心这么些误差。

不期而至的解决方案

追思整个渲染执行的流水线:

  1. background-size 效用于整个Sprite图,对其尺寸缩放。
  2. background-position 定位。

那就是说要收获不错的作用的话,以推广两倍为例,需求完毕:

  1. 将伪元素的尺寸扩张2倍
CSS

.message:after { width: originWidth \* 2; height: originHeight \* 2;
}

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6ce3955d4080086130-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6ce3955d4080086130-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6ce3955d4080086130-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6ce3955d4080086130-4">
4
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6ce3955d4080086130-1" class="crayon-line">
.message:after {
</div>
<div id="crayon-5b8f6ce3955d4080086130-2" class="crayon-line crayon-striped-line">
    width: originWidth * 2;
</div>
<div id="crayon-5b8f6ce3955d4080086130-3" class="crayon-line">
    height: originHeight * 2;
</div>
<div id="crayon-5b8f6ce3955d4080086130-4" class="crayon-line crayon-striped-line">
}
</div>
</div></td>
</tr>
</tbody>
</table>
  1. 将总体Sprite图的尺寸扩张2倍
CSS

.message:after { background-size: originSpriteWidth \* 2,
originspriteHeight \* 2; }

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6ce3955d8478968227-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6ce3955d8478968227-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6ce3955d8478968227-3">
3
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6ce3955d8478968227-1" class="crayon-line">
.message:after {
</div>
<div id="crayon-5b8f6ce3955d8478968227-2" class="crayon-line crayon-striped-line">
    background-size: originSpriteWidth * 2, originspriteHeight * 2;
</div>
<div id="crayon-5b8f6ce3955d8478968227-3" class="crayon-line">
}
</div>
</div></td>
</tr>
</tbody>
</table>
  1. 将坐标偏移量相应增添2倍
CSS

.message:after { background-position: originBackgroundPositionX \*
2, originBackgroundPositionY \* 2; }

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6ce3955db510312506-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6ce3955db510312506-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6ce3955db510312506-3">
3
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6ce3955db510312506-1" class="crayon-line">
.message:after {
</div>
<div id="crayon-5b8f6ce3955db510312506-2" class="crayon-line crayon-striped-line">
    background-position: originBackgroundPositionX * 2, originBackgroundPositionY * 2;
</div>
<div id="crayon-5b8f6ce3955db510312506-3" class="crayon-line">
}
</div>
</div></td>
</tr>
</tbody>
</table>

亚洲必赢官网 6

图片

综上,若是想在百事可乐图内落成缩放逻辑,必须通过

  • Sprite图长宽
  • 该图标原始长宽
  • 该图标在Coca Cola图中的偏移量

一共6个变量去落实。用动态样式语言的话,或许可以收获这么一个通用函数:

CSS

/* 7-Up图icon img: 图片路径 spriteWidth: 合成的Sprite图的小幅
spriteHeight: 合成的Coca Cola图的长度 originWidth: 使用图片的原来宽度
originHeight: 使用图片的原本长度 width: 须要表现的肥瘦 height:
须要表现的尺寸 offsetX: Coca Cola图中的x轴偏移地方 offsetY:
Pepsi-Cola图中的y轴偏移地方 horizontal: 水平定位 hDuration: 水平定位偏移
vertical: 垂直定位 vDuration: 垂直定位偏移 relativePos: 相对固化 */
.pseudo-icon-sprite (@img, @spriteWidth, @spriteHeight, @originWidth,
@originHeight, @width, @height, @offsetX, @offsetY, @horizontal:left,
@hDuration:0, @vertical:center, @vDuration:0, @relativePos:relative) {
… }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/*
雪碧图icon
img: 图片路径
spriteWidth: 合成的雪碧图的宽度
spriteHeight: 合成的雪碧图的长度
originWidth: 使用图片的原始宽度
originHeight: 使用图片的原始长度
width: 需要呈现的宽度
height: 需要呈现的长度
offsetX: 雪碧图中的x轴偏移位置
offsetY: 雪碧图中的y轴偏移位置
horizontal: 水平定位
hDuration: 水平定位偏移
vertical: 垂直定位
vDuration: 垂直定位偏移
relativePos: 相对定位
*/
.pseudo-icon-sprite (@img,
    @spriteWidth, @spriteHeight,
    @originWidth, @originHeight,
    @width, @height,
    @offsetX, @offsetY,
    @horizontal:left, @hDuration:0,
    @vertical:center, @vDuration:0,
    @relativePos:relative) {
    …
}

以上,咱们完结了把Sprite图中的图标缩放后表现在页面上的这一对象。

哪些,看到这么些解决方案,有没有一种把代码删光,把大中小多少个图标都塞进7-Up图的兴奋?

做出来的页面在种种手机端看起来的大体大小(高度)是一模一样的,所以在大屏手机会觉得页面稍小,小屏手机页面稍大

transform scale方法

由zoom缩放自然联想到了transform里的scale缩放方法。
关于zoom和transform scale的界别可以查阅那两篇小说:
http://www.zhangxinxu.com/wordpress/2015/11/zoom-transform-scale-diff/
http://www.cnblogs.com/Hchun/p/5291400.html

transform scale方法代码:

.icon{
      width: 20px;
      height: 20px;
      background-position: -100px -80px;
}
//设计稿宽度为640px,所有值均和设计稿取值一致
@media only screen and (max-width: 320px){
     .icon{-webkit-transform:scale(0.5);transform:scale(0.5);}
}

亚洲必赢官网 7

效果图

单纯地用transform
scale方法,确实可以较周密地解决边框被裁剪的标题,可是其在页面中的地方却有失水准了。商讨发现有四个原因:

  1. transform scale默许景况下是相对于元素中央展开缩放的。
  2. transform
    scale只会对元素本身进行缩放,在页面渲染的时候,会先渲染元素原始的分寸,再进行缩放。缩放的时候不会再招惹页面的重绘,由此元素原始尺寸有多大,就会占据页面多大的上空,和缩放毫无干系。

那有没有缓解方案,可以保留transform
scale完美展现图标的独到之处,又可以落成页面精准布局的办法吧?

冷清一下,再思索方案

不就是缩放么?background-size会扯出这么多难点,不是还有个transform么?会冒出雷同的题材么?
那么要博得不错的功效的话,以加大两倍为例,须求做到:
恩?好像就加一行代码?

CSS

.message:after { … transform: scale(2); }

1
2
3
4
.message:after {
    …
    transform: scale(2);
}

好吧,就是如此。两者分别也很简短,因为一个效果在要素上,一个功能在七喜图上,所将来人会带出n多副功能。

那么一旦须要缩放到一定尺寸时,还索要了解原始尺寸,通过测算得到一个缩放周全,那样才能最后落得所需的机能。

设若要使中度能更好的适应种种手机显示屏,须求写太多的传媒询问样式,作用低下

transform scale & :before方法

假使给元素再封装一层容器,让父容器大小和要素一致,再让要素脱离文档流,始终绝对于父容器定位呢?理论上是可以兑现的,然则那样会多扩展一层标签。因而,自然想到了伪元素:before和:after,让伪元素彰显图标。
具体代码如下:

.icon{
      width: 0.2rem;
      height: 0.2rem;
      position: relative;
}
.icon:before{
      width: 20px;
      height: 20px;
      background-position: -100px -80px;
      position: absolute;
      left: 0;
      top: 0;
      -webkit-transform-origin: 0 0; //让元素相对于左上角进行缩放
      transform-origin: 0 0;
}
@media only screen and (max-width: 320px){
     .icon:before{-webkit-transform:scale(0.5);transform:scale(0.5);}
}

如此那般基本上就能确保图标完整且地方准确。

亚洲必赢官网 8

然则这一个措施最大的紧缺,是增添了css里面的代码量。

至于rem、zoom、transform scale二种办法已毕移动端的CSS
Coca Colas,其优缺点都是备受关注标,在档次中得以根据具体情形来衡量选拔哪一类方法。

末尾的总计

回看一下,一个简便的缩放须求,出现了二种缓解方案:

  1. 最无脑的整套放进雪碧图中
  2. 最冗长的修改background-size
  3. 以及最简便易行的transform变形

诚如景观下,如故无视第二种方案吗。那么在1和3两者中间,则各有取舍。现在回首整个寻求解决方案的历程,个人或者相比帮衬方案1的,毕竟,大致一向不怎么出错的恐怕。而且都是一律张Coca Cola图,并从未更多的哀告数,只是多了点图片大小而已。

全屏背景图片跟页面元素须要耦合时,元素位置的规定尤为困难(可能需求经过百分比去确定因素的横向地点,但平素会有误差)

连带参考资料

一种百事可乐图自动化方案的设想

MDN:background-size

1 赞 2 收藏
评论

亚洲必赢官网 9

近些年在博客园上收看流云诸葛统计的一篇小说《从乐乎与天猫的font-size思考前端设计稿与工作流》,其中介绍到的三种Web
App适配方案,我们明天的做法恰恰是跟智联招聘类似的简短方案,当然就会有上面我提到的一些题材,最后经过预研和demo测试,我们运用了微博跟天猫商城的方案,其实这两边的方案是齐齐哈尔小异,都是依据rem的适配方案。

2、解决难题的方案

博客园跟Taobao的方案介绍在上头流云诸葛的篇章中早就写的很了解了,建议方可先看看那篇作品再阅读上边我所说的,可能会越来越清晰。

(1)方案的大约介绍: 基于rem

前提:页面元素的布局尺寸全都以设计稿为基准等比例设置。

给html根节点设置一个基础font-size值,然后页面的所有因素布局均相对于该font-size值接纳rem单位设定。那么基础的font-size值该怎么取呢?

倘诺通过媒体询问设置font-size,只好解决一些的事态,而且并无法做到适配,因为手机显示屏宽度类型实在太多了,所以font-size的取值要透过js计算,取当前viewport的deviceWidth与设计稿的宽

比例值,例如:我们的安顿稿尺寸都是640px的,iphone5的deviceWidth是320px,那么统计出来的font-size值就是
320 / 640 =
0.5,因为得出的font-size太小,不便民总括,且部分浏览器可能不兼容太小字号,所以将font-size放大100倍,所以最终总计出来的font-size为
320 / 640 * 100 = 50(px);
当然,那么些值是基于设计稿来计算的,所以据悉测算规则,上面列出两种普遍设计稿相应的font-size值:

deviceWidth = 320,font-size = 320 / 6.4 = 50px

deviceWidth = 375,font-size = 375 / 6.4 = 58.59375px

deviceWidth = 414,font-size = 414 / 6.4 = 64.6875px

deviceWidth = 500,font-size = 500 / 6.4 = 78.125px

可在script标签加上如下代码

(function() {

document.addEventListener(‘DOMContentLoaded’,function() {

varhtml = document.documentElement;

varwindowWidth = html.clientWidth;

html.style.fontSize = windowWidth / 6.4 +’px’;

// 等价于html.style.fontSize = windowWidth / 640 * 100 + ‘px’;

},false);

})();

// 那一个6.4就是按照设计稿的横向宽度来规定的,假设你的设计稿是750

// 那么 html.style.fontSize = windowWidth / 7.5 + ‘px’;

迄今,font-size的根基值就规定好了,而且知道该font-size值是手机deviceWidth跟设计稿的比重值
的 100倍(主要)

(2)那么页面元素该怎么设置宽高、边距

诸如:一个企划稿宽高为140px的图标,左边距为50px,那么它的css应该如此写

.icon {

width: 1.4rem;/* 像素换算rem:140px / 100 = 1.4rem */

height: 1.4rem;

margin: 0 0 0 .5rem;

}

因为html的font-size是松开了100倍,所以测算rem时,要用设计稿的莫过于像素除以100,140px
/ 100 = 1.4rem; 最终实在的像素大小就会由deviceWidth跟设计稿的横向宽 的
比例 自动计算出来。

如图三星5上边的作用:

亚洲必赢官网 10

iPhone6的效果:

亚洲必赢官网 11

可以看出来:html的font-size动态按照deviceWidth改变,图标的宽高、边距等也根据font-size动态按比例变化,马到功成了?不对,相信机智的您早就见到貌似在Nokia6的下有的图标背景错位了。。是的,那揭披露了一个背景使用Coca Cola图的一个害处(由于font-size小数点太多,计算出实际背景图大小background-size跟背景图地点background-position时浏览器精度不够或者就会现出岗位的过错(我猜的),那几个前面还会详细讲解决方案)

到那边,设置宽高、边距等都OK了,接下来…

(3)别的因素的字体大小该怎么设置?

在流云诸葛的稿子中讲到,腾讯网跟天猫商城的做法都是选取额外的媒体询问设置两种字体大小,例如:

@mediascreen and (max-width: 320px) {

body{font-size: 14px;}

}

@mediascreen and (min-width: 321px) and (max-width: 413px) {

body{font-size: 16px;}

}

@mediascreen and (min-width: 414px) and (max-width: 639px) {

body{font-size: 17px;}

}

@mediascreen and (min-width: 640px) {

body{font-size: 18px;}

}

可为什么不用rem呢?后来去查了一番素材,发现有一种名叫点阵字体的留存(什么是点阵字体),也叫作位图字体,位图大家都领悟,跟矢量图是有分其余,就是放大会模糊,所以点阵字体也是放大会模糊的,假如按照rem设置字体大小,字体会自由缩放,可能就会促成点阵字体模糊,所以必要设定使用三种永恒大小的字体。但是,在例行情状下,系统自带的书体都是矢量字体,所以利用rem为单位是不曾难题的,除非你的网页须求利用特殊的点阵字体。

总计:若是网页没有使用特殊的点阵字体,字体单位利用rem,若是用到了点阵字体,字体需求通过媒体询问设置两种永恒大小的字体

(4)关于背景图片的错位难点

上边已经意识了,通过换算rem设置background-size跟background-position的时候,在部分手机型号下会现出背景图错位的情况,可是借使不用rem设置的话,又不可以落得适配的目标。(background-size、background-position的rem换算方法跟前面讲的宽高设定一样,都是设计稿尺寸(那时应该是七喜图的原始尺寸)除以100倍)

最终通过尝试,得出了二种缓解方案:

1)如图(推荐方案):

亚洲必赢官网 12

图标的体裁

.icon {

width: 1.4rem;

height: 1.4rem;

background-image: url(sprite.png);

background-repeat: no-repeat;

background-size: 1.4rem;

}

.icon3 {

background-position: 0 -2.8rem;

}

化解措施,如图:

亚洲必赢官网 13

代码如下:

.icon-fix {

background: none;

position: relative;

overflow: hidden;

}

.icon-fix:after {

content:”;

display: block;

width: 10000%;

height: 10000%;

position: absolute;

left: 0;

top: 0;

background-image: url(sprite.png);

background-repeat: no-repeat;

background-size: 140rem;

-webkit-transform-origin: 0 0;

-webkit-transform: scale(.01);

transform-origin: 0 0;

transform: scale(.01);

}

.icon3:after {

background-position: 0 -280rem;

}

有着有关代码(传送门)。

2)不使用雪碧图,使用单个背景图,这几个时候就不存在background-position的急需,只需设定background-size:
contain;即可,那样做的弊病就在于不可以使用Coca Cola图,图片请求增多,适用于页面图标较少的气象

3)使用嵌套img标签,通过相对定位模拟background-position,具体请看responsive-sprites,那种做法要求越来越多的标签,且img图片只可以放图标尺寸大小一样的7-Up图,而且不可能透过媒体询问利用多倍图

如上3中解决方案第一种最优,当然有些特殊情状可能要求按需选拔!

原文地址:http://www.cocoachina.com/webapp/20151110/14148.html

网站地图xml地图