切图规范

工具

流程

• 准备：拿到带标注的设计稿（三件套，一件都不可缺少：视觉图，标注，图标）
• 主题：设定常用元素的theme，避免重复工作
• 框架：做布局
• 填充：填充元素
• 清扫：优化细节

通用规则

1. 命名规则：所有命名，均采用中划线形式。

2. 应提取到common.cs文件中的元素有

   • 应初始化的元素（html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img）等
   • 字体（大小，颜色，行间距）及hover样式
   • 边框（上、下、左、右、全部）各一个
   • 按钮（根据设计，分不同颜色）及hover样式

   • 常规布局（通用列表，通用表单，表头）等

     另：还有其他通用样式，具体根据设计稿来抽取。

框架

1.Vue切图

• 使用less或者sass。
• 每个页面切分一个css。
• 每个css以该页面测名称命名，且该页面的外围层（div）以该页面名称定义class名。
• 若页面中某部分结构，比如列表结构，大于3个页面，则应提取到common.css中，作为通用css使用

布局

• 根据设计稿将框架搭建，如果布局不熟练，可以使用色块来替代。应注意：
  • PC端：若不是响应式，则中间部分应是固定宽，且居中。不随浏览器宽高改变，响应式另做处理
  • 像素差：边框默认为外边框，若计算时忽略，很可能造成布局偏移。修改为内边框css：
    box-sizing: border-box;
  • 内外边距：内外边距应应采取少用原则，即能使用一个原色的margin来确定布局，则不应使用多个值。

清扫

布局方案

• 弹性布局

• Flex布局

>= IE11

Flex

>= IE10

>= IE9

>= IE8

>= IE6

框架

技巧

[布局技巧库]

位置摆放

实现筛子

• float会有什么神奇的特征？

• 将图标转成font icon 工具：https://icomoon.io

FAQ

• 为什么font-size不起作用？ 答： Chrome中，小于12px的字体，不会起作用。所以，尽量设置>=12px的字体。解决办法如下：

  18px 字型大小 16px 字型大小 14px 字型大小 12px 字型大小 11px 字型大小 10px 字型大小 9px 字型大小 8px 字型大小

参考