切图

官网：https://haomo-tech.com

作者：胡小根

邮箱：hxg@haomo-studio.com

工具

流程

  • 准备：拿到带标注的设计稿（三件套，一件都不可缺少：视觉图，标注，图标）
  • 主题：设定常用元素的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会有什么神奇的特征？

FAQ

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

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

参考

results matching ""

    No results matching ""