切图

官网: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 ""