转载

移动端重构实战系列6——icon与图片

”本系列教程为实战教程，是本人移动端重构经验及思想的一次总结，也是对 sandal 及 sheral UI 的一次全方位剖析，首发在imweb和 w3cplus 两大站点及“前端Talk”微信公众号，其余所有标注或没有标注来源的均为转载。“

——imweb 结一

本篇主要从icon及图片说下移动端重构碰到的一些问题及实践方法。

icon

对于icon的问题多数都集中在颜色和大小上，所以 sheral 采用了svg icon和css绘制的icon，关于svg icon网上已经有很多文章了，所以这里主要介绍绘制icon的一些技巧，如下以搜索图标为例：

// icon search .icon-search {     position: relative;     &::before {         content: "";         position: absolute;         top: 50%;         left: 50%;         transform: translate(-50%, -50%);         border: 2px solid currentColor;         height: 12px;         width: 12px;         box-sizing: border-box;         border-radius: 50%;         margin-left: -2px;         margin-top: -2px;     }     &::after {         content: "";         background: currentColor;         height: 6px;         width: 2px;         position: absolute;         top: 50%;         left: 50%;         margin-left: 4px;         margin-top: 4px;         transform: translate(-50%, -50%) rotate(-45deg);     } }

icon-search本身没有设置大小，只充当了一个relative的容器
绘制的功能交给伪元素before和after
伪元素采用绝对定位居中
颜色使用currentColor

这样做可以带来两个好处，一是可以方便设置icon-search的大小（扩大点击范围同时，还保持水平垂直居中），二是可以方便修改颜色（设置icon-search的color即可更改颜色）

其他的一些绘制icon具体可见 sandal/ext/_icon.scss 文件，demo可见 sheral icon

图片

关于图片这里主要讨论三点：

普通图片
图片的宽高比
背景图片大小

1、对于第一点，在sandal的 _reset.scss 中就已经重置好了

img{     vertical-align: middle;     max-width: 100%; }

2、对于图片的宽高比，我们在基础知识中已经说了下，这里再具体说明下如何使用，以 card list 为例。

如果你多刷新几次应该就可以看到卡片1与2的图片区别了，1的图片区域有了高度，而2没有，所以1图片的加载不会影响下面内容的变化，而2加载图片会把下面内容向下排挤。这是因为卡片1的图片我们包裹了一层，设置了一个宽高比，而卡片2没有。

下面详细说下它们之间的html和css区别

<!-- 卡片1 --> .item-img-wrap > img.item-img  <!-- 卡片2--> img.item-img

// 卡片1  .item-img-wrap{     @include object-wrap(100%, '.item-img'); }  // 卡片2 .item-img{     width: 100%; }

其中mixin object-wrap在sandal中定义如下（具体解释可参阅 css中如何做到容器按比例缩放）：

// object wrap // $child 参数请使用单引号，因为用于子元素选择器 @mixin object-wrap($percent: 100%, $child: 'img') {     position: relative;     padding-top: $percent;     height: 0;      #{unquote($child)} {         position: absolute;         top: 0;         left: 0;         width: 100%;         height: 100%;     } }