我又开始写博客了
本来平时是使用公司内部的语雀来进行日常工作的记录，但是想了想，一些不涉及内部知识的东西还是写在公共平台上比较好。随时可以查得到。被看到的可能性更大，错漏也会被指出。蛮好的。

这段时间第一次接触c端的工作，需要学习的地方很多。除了干杂活之外，终于正式开始了模块的开发。（虽然只是协助大佬开发，先做切图。

1 切图是什么？

我开始听到“切图”两个字的时候，以为是ui设计的切图。然而最后发现是，除了调用接口、数据处理和联动等高级逻辑之外的html、css以及基本的逻辑部分。
目前知做了一次切图，所以只总结一部分内容。

2 css优化

2.1 兼容性查询

can i use it
一个成熟的大佬和一个新手切图仔最重要的积累差距就是在css上。ccs海无涯，回头是岸～
这次被指出了一些不成熟的写法，现在记录下来。后续避免同样的错误。

2.2 字体

字体这部分我一般在开发的时候直接复制粘贴ui给的字体，很少会去思考字体的选择。没想到这次在字体上出了错。

2.2.1 默认字体：

这里设计给出的字体是PingFangSC-Semibold。但在写css的时候stylelint就给我报错了，当时只是以为字体没引入之类的，没太放在心上，直接注释掉了。后来才知道这个字体是ui设计软件的默认字体。遇到这种情况字体其实不用设置，因为各个系统都有自己的默认字体。
关于各个系统的默认字体可参考：各个系统的前端字体

2.2.2 引入外部字体

这里又出现了之前没有见过的三个属性：

关于font-style
关于font-display
关于unicode-range
unicode-range的骚操作

@font-face {font-family: "CSD";src: url("https://xxxxxxxx.woff") format("woff");font-weight: 500;font-style: normal;font-display: swap;unicode-range: U+30-39, U+A5, U+3A;
}

2.2.3 rgb和#ccc的选择？

一般来讲，如果字体有透明度的要求，则使用rgb来进行设置，毕竟代码会少一行不是。

opacity: 0.8;
color: #000000;
// 改为：
color: rgba(0,0,0,.8);

2.3 居中

居中是最最最常见和有最多种方案实现的需求。垂直居中、水平居中，各种方案总有一种能够实现。
在这次切图的过程中也暴露了我的一个问题，那就是，我会习惯性地使用position、top、transform的方式。当然这个方式肯定是对的只是有的时候会不太合适。

2.3.1 flex实现文本垂直居中

本来使用的就是上述的暴力解决方式。但是被指出并不合适，建议使用flex。那么flex怎么实现文本的垂直居中呢？
简单到令人发指：

<div class = "content">文字垂直居中
</div><style>
.content {height: 100px;display: flex;align-items: center;background-color: #ccc;justify-content: center;
}
</style>

这样一来水平和垂直都居中了。
就像这位博主对自己的评价，我此刻也是这个想法：我简直是个智障。
图片和文字垂直居中-flex布局

2.4 滚动轴

这次的切图中出现了横向滚动的需求，同时需要将滚动轴隐去，使得ui更加和谐。
在查了很多资料之后，我找到了::-webkit-scrollbar这个属性来实现滚动条的隐藏。

2.5 伪元素

怎么实现这个效果？

3 动画

上面提到的滚动条，一般在点击某一个元素的时候，会自动居中。
这个实现就要依靠js相关的代码了。
贴一个实现（没看懂。。。）

import raf from './raf';
import cancelRaf from './cancelRaf';// 是否支持scroll-behavior
const isSupportScrollBehavior = ('scroll-behavior' in document.body.style);
// 因性能问题，针对 IOS gpu < A10的设备，禁止动画
const banAnim = (function () {let result = false;if (navigator.userAgent.indexOf('iPhone') !== -1) {try {const canvas = document.createElement('canvas');const gl = canvas.getContext('experimental-webgl');const debugInfo = gl.getExtension('WEBGL_debug_renderer_info');const gpu = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);const gpuVersion = gpu.match(/Apple A(\d+) GPU/);if (gpuVersion && gpuVersion[1] < 10) {result = true;}} catch (e) { // eslint-disable-line}}return result;
})();export default (scroller, target, noAnim = false) => {const scrollerWidth = scroller.offsetWidth;const maxScrollLeft = scroller.scrollWidth - scrollerWidth;let currentScrollLeft = scroller.scrollLeft;let targetScrollLeft = target.offsetLeft - scrollerWidth / 2 - scroller.offsetLeft + target.offsetWidth / 2;if (targetScrollLeft < 0) {targetScrollLeft = 0;} else if (targetScrollLeft > maxScrollLeft) {targetScrollLeft = maxScrollLeft;}if (currentScrollLeft !== targetScrollLeft) {if (noAnim) {scroller.scrollLeft = targetScrollLeft;} else if (isSupportScrollBehavior) {scroller.scrollTo({ left: targetScrollLeft, top: 0, behavior: 'smooth' });} else if (banAnim) {scroller.scrollLeft = targetScrollLeft;} else {const startTime = Date.now();const distance = targetScrollLeft - currentScrollLeft;const originScrollLeft = currentScrollLeft;const duration = 200;const scroll = () => {const p = (Date.now() - startTime) / duration;currentScrollLeft = originScrollLeft + p * distance;if (p >= 1) {scroller.scrollLeft = currentScrollLeft;} else {scroller.scrollLeft = currentScrollLeft;scroller._raf = raf(scroll);}};scroller._raf && cancelRaf(scroller._raf); // 停掉上次的动画scroller._raf = raf(scroll);}}
}

还有优化的余地吗？

上文我实现了滚动条的隐藏。
但是还有优化的余地吗？
是有的。

-webkit-overflow-scrolling: touch;

这个属性是在ios8+的系统中将滑动操作设置得更加顺滑的属性。
关于在兼容性和优化体验之间的取舍，引用大佬原话：

判断你的加的css样式是做什么的，如果是锦上添花，在低端设备不支持那就不支持，不会影响主体功能。但如果是主要功能，那就需要考虑兼容性更好的方案。

4 设计稿没提到？

作为一只兢兢业业的切图仔，除了使出浑身解数实现prd和ued的所有要求之外，还需要根据自己的经验，对prd和ued中没有出现的，但是明显是疏忽了的地方进行补充。
例如下图这种店名的显示，prd中并没有给出如果超长怎么办，但是作为一名敬业的切图仔，当然是要考虑到超长时的处理情况，进行合适的截断或者换行的。

切图？切图！——切图仔htmlcss秃头指南相关推荐

切图具体需要切什么内容_UI日常-切图切图怎么破？
作为一名"小小"的UI设计师,切图可以说是我们日常工作的必修课.一些设计师认为切图规范不重要:或是切图是设计助理的活:又或者是单方面认为,开发应该100%的按照我们的切图去写代码. ...
android ui 切图工具,APP切图标注教程：UI设计切图标注的小工具实用技巧
分享关于一篇UI设计师必须要懂的切图标注的小工具实用技巧,让你在跟开发工程师协作的时候更加得心应手. 设计师必备的UI切图小工具如下3大常用工具: 1.切图工具 Assistor PS 也是一款PS的 ...
美工效果图大小 html,六、DIV CSS实战之布局美工图分析与切图
DIV CSS实战之布局分析与切图美工图到DIV CSS制作成HTML中间必不可少的步骤为对美工图的分析和美工图的切图.平时大家说切图也是从这个步骤捡取的一个词语来代表css完整制作的代名词,就像d ...
点击箭头切图 html,项目切图规范 css精灵图 css小箭头代码 BFC (Block Formatting Context) 块级格式化上下文...
项目切图规范 PS常用工具移动工具移动工具主要负责图层.选区.等的移动.复制操作. 快捷键:v 抓手工具快捷键:h 空格 + 鼠标左键拖动,空格键可临时转换为抓手工具. 放大镜工具放大镜工具可 ...
ps怎么切图后放html下,怎么使用PS切图？PS切图后怎么保存到本地？
怎么使用PS切图?使用PS切图的目的其实就是将大的设计图分割成多个小图片,通过网页代码定位后台相册的照片来显示前端网页的效果,当然,在处理某X宝的图片的时候也是可以使用该方法的,具体见下文怎么使用PS ...
【爬虫】Yhen手把手教你爬取表情包，让你成为斗图界最靓的仔！
以下内容为本人原创,欢迎大家观看学习,禁止用于商业用途,转载请说明出处,谢谢合作! ·作者:@Yhen ·原文网站:CSDN ·原文链接:https://blog.csdn.net/Yhen1/art ...
图解：什么是图？（以“图”话图）
Python实战社群 Java实战社群长按识别下方二维码,按需求添加扫码关注添加客服进Python社群▲ 扫码关注添加客服进Java社群▲ 作者丨景禹来源丨景禹(LifeAtaraxia) ...
关于.9图失效以及.9图不可以错过的细节点
Nine Patch Pic .9图作为Android端图片控制的一个利器,使用的时候很简单,只需要在一个图片的四边预留1px的空白像素,然后按照规则,分别在left top right bottom ...
这样制作一个Android输入法开发微信斗图APP，斗图就再也没输过！
目录: 1.导读: 2.Android 输入法开发简介及流程: 3.斗图 APP 开发介绍: 4.斗图 APP 功能优化: 5.总结 1.导读微信斗图的应用有很多,但大部分都是通过微信分享来实现的, ...

切图？切图！——切图仔htmlcss秃头指南