重构技巧之其它

一、Iconfont 

项目管理:统一使用阿里巴巴矢量图标库管理图标

上传步骤:

① 点击上传图标 

② 选择所要上传的项目,如无项目需要先新建项目。


③ 多人维护同一套图标需要添加成员时,在右上角操作


④ 项目负责人变更需要转让时,可转让项目。


⑤ 使用时,单色图标采用Font class,多色图标采用Symbol,不使用Unicode进行维护。

下载图标时,可选择:图标管理 - 我的项目 - 下载至本地。

一般我们只需要将iconfont.css相应的类名和content复制到项目中对应的icon样式中,并将其字体文件(ttf / woff)重命名为项目的文字文件覆盖即可。

二、SASS文件

一般SASS文件会有一个_mixin.scss封装了一些公共的mixin,现有的一般是三角形、单行/多行溢出、自定义滚动条样式、背景渐变等,可自行增加,但不可随意删减,否则可能会导致编译错误。

SASS编译可安装“考拉.exe”(考拉只支持纯英文的路径)或直接在vs code安装插件 Live Sass 。

三、移动端

移动端的字号一般会设计得比较小,且在移动端设备的浏览器支持无限小的字号(不同于PC端,移动端字号可远远小于12px)需要先在浏览器把最小字号修改一下。

移动端利用vw + rem设置根字号可以做出不需要写大量媒体查询断点了。

具体原理可参考:https://segmentfault.com/a/1190000016047555

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。