关于前端:css踩坑之transformorigin

家喻户晓，咱们看到浏览器渲染进去的页面像素是物理像素，而前端开发过程中所应用的是css像素。因而咱们在理论开发过程中常常须要思考到屏幕分辨率的问题，针对的不同分辨率的屏幕对于雷同的css像素做相应的缩放解决。常见的就是对于1px的分割线个边框等。

最常见的例子，如下一个1px宽度的一个竖分割线

div {    position: realative;    &::after {        content: '';        width: 1px;        height: 100px;        position: absolute;        top: 10px;        left: 10px;    }}

屏幕自适应准则（media-query），若是高分屏的屏幕，则须要缩放：

{    transform: scale(0.5);    transform-origin: left top; // 缩放之后做一些地位调整}

对于transform-origin：left top;在一些非凡状况下回呈现竖线隐没，通常是width为奇数的时候才会呈现，且偶现非必现，可能跟浏览器渲染无关，具体起因还有些迷。

解决方案：
transform-origin：right top;
为什么这么改变就能够解决这个问题我临时还没有想明确，left和right实质上是差不多的，是将元素的中心点依照左或者右缩放。说白了只是地位变动，元素不应该隐没。

若查到起因再来补充。