移动端重构——图标

 我们把图标分为三种:背景图片,直接绘制,@font-face。如无特殊情况,图标的标签采用i标签。

1.背景图片

我们会选择sprite形式,吧所有的图标放大一个大图上, 考虑到retina屏,所以我们图标设计为实际大小的2倍,然后设置background-size 为实际大小。示例:

图标大小为24px,实际为12px,

.icon-msg,.icon-info{

    display: inline-block;

    vertical-align: -2px;

    background:url(../images/icon-msg.png) no-repeat;

    background-size:26px 26px; // 整个sprite图片大小的一半,注意不要采用50%,百分比是按元素大小来计算的,而不是背景图片大小

}

.icon-info{

  

    background-position: -14px 0;

    width: 12px;

    height: 12px;

}

当然有时候图标比较少,我们为了减少请求,也可以直接把图片转成base64格式写在css中,这里推荐一个在线转的工具:Encode Data URL

 

2.借助css3直接绘制

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" name="viewport">

  <meta name="apple-mobile-web-app-capable" content="yes">

  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <meta content="telphone=no" name="format-detection">

  <title>图标</title>

 

  <style type="text/css">

    .icon_checkbox{ width: 16px; height: 16px; display: inline-block; vertical-align: middle; 

      border:1px solid #ccc; background-color: #fff; line-height:1px; text-align:center; 

      position: relative; margin-left: 200px;}

      .active{ border-color: #0078e7;}

      .active::after{

        content: ""; width: 8px; height: 3px; border-bottom: 2px solid #0078e7; border-left: 2px solid #0078e7;

        display: block; margin-top: 3px; margin-left: 2px; -webkit-transform:rotate(-45deg); 

      }

  </style>

</head>

<body>

  <i class="icon_checkbox active"></i>

  <i class="icon_checkbox"></i>

</body>   

</html>

凭借优秀的css3,我们可以应用其中一些属性绘制一些简单的图标,如箭头等,这里我们以绘制checkbox两种状态为例:

active状态,通过::after生成一个长方形,然后设置其border-bottom和border-left,再通过css3的 rotate旋转45 即可,那个勾就是两条边框。

 

3. @font-face 字体图标

   字体图标  http://www.bootcss.com/p/font-awesome/  

   阿里图标  http://www.iconfont.cn/

 

漠大博客原文http://www.w3cplus.com/mobile/mobile-terminal-refactoring-icons.html

你可能感兴趣的:(移动端)