切图？切图！——切图仔html&css秃头指南
我又开始写博客了
本来平时是使用公司内部的语雀来进行日常工作的记录，但是想了想，一些不涉及内部知识的东西还是写在公共平台上比较好。随时可以查得到。被看到的可能性更大，错漏也会被指出。蛮好的。
这段时间第一次接触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-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中并没有给出如果超长怎么办，但是作为一名敬业的切图仔，当然是要考虑到超长时的处理情况，进行合适的截断或者换行的。
下一篇： 母朱尚书