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

作者：结一 日期：2016-07-12 点击：1775
移动端重构系列
sandal
sheral
mobile

”本系列教程为实战教程，是本人移动端重构经验及思想的一次总结，也是对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区别

HTML:

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

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

SCSS:

// 卡片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%;
    }
}

3、至于最后的背景图片，说起来又是个悲伤的故事，虽然CSS3的background-size已经非常强大了，但是安卓强大的阵线中总有某些机子总是拖了一大截后腿的。

首先安卓4.3-不支持background-size的缩写，这倒没什么，再另写一行就是了，关键是有些安卓4.3-还不支持百分比单位。于是只好把目光转向cover或contain了（更多介绍请参考background-size），这又涉及到容器的宽高了。

如果容器已经有了宽高（当然这里的宽高是指可以随着机型变化的），比如全屏，我们就直接用cover了；而如果容器没有宽高，那就又回到了第二个问题，我们可以使用图片或者把设置背景图的这个容器设置成我们图片的宽高比，那样再使用cover或contain都可以。

以微信的朋友圈头部的背景图片为例（这里只是进行分析，具体的实现技术我也不知道）：

  • 在更换相册封面的时候，对选择的图片进行了1:1的裁剪
  • 按照第二种情况，设置背景图片的容器的高度等于宽度(图片是1:1)，然后设置background-size为cover即可
  • 或者按照第二种情况，使用img元素，外面再嵌套一层wrap设置高度

默认看到的大概是图片下面的四分之三(我并没有去量尺寸，根据经验猜测而已，如有错误请见谅)，上面的四分之一当我们向下拉取刷新的时候就可以看到整个图片了

结一

常用昵称“结一”。资深前端工程师，Drupal Themer，拥有丰富的前端实战经验。目前和大漠一起管理 W3CPlus站点，为 CSS3 的推广贡献自己的力量，是广大的 Drupal 爱好者之一。擅长于布局架构、浏览器兼容，CSS3研究。请关注我：新浪微博。

如需转载，烦请注明出处：http://www.w3cplus.com/mobile/sandal-parts-6.html

返回顶部