CSS 实现 1px 以内的移动

appetizerio 发布于2019-08-29 11:28 / 1554人阅读

摘要：之前的文章说过关于行内元素垂直方向对齐的方案。在上一篇文章里我们提到了内的移动问题。屏的移动设备如何实现真正的线移动点像素的秘密看完大彻大悟，佩服佩服，思路很多，回到本文重点想一下能实现移动的方法。

之前的文章说过关于行内元素垂直方向对齐的方案。感兴趣的可以看我的往期文章。在上一篇文章里我们提到了 1px 内的移动问题。本文就一像素内的问题给出解决方案。

可能大家看过关于 Retina 屏幕的一像素边框问题，注意这里是边框宽度而不是移动元素。

什么？border 小于 1px ？

对，因为前面有人给出相关方案而且好多种方案，这里不重复描述实现原理，给大家两个链接，感兴趣的自己跳转。

Retina 屏的移动设备如何实现真正 1px 的线？

移动 web 点 5 像素的秘密

看完大彻大悟，佩服佩服，思路很多，回到本文重点

想一下能实现移动的方法 position(top,right,bottom,left), margin, padding, vertical-align。

上面给的只是一部分可以通过具体单位(px, em, rem 等)进行移动的方法

本着实践的原则，上述方案都不可行，在最新的 chrome 中，当小于 0.5px 时是 0，当大于等于 0.5px 时就变成 1px。

因为案例过于简单，不做 demo ，感兴趣的自己实践，相信大家多数人试验过了。

那么还有什么以具体单位移动的属性呢？

解决方案

也许你早就知道有 transform 的 translate 属性了。没错它就能实现 1px 内的移动！

基本语法：

transform: translate(12px, 50%);
transform: translateX(2em);
transform: translateY(3in);

给出本文的 demo 代码，

截图如下

这里为了更容易观察，我们把布局换成 inline-block ，我们发现元素与元素之间存在空隙回去再看一遍代码发现没什么问题，那这段距离是怎么引起的呢？

是空格? 没错! 在使用 inline-block 的时候一定注意代码缩进或换行带来的不必要的麻烦（无意中添加了空格）。

修改如下

得到最终结果，如下图

这里特地将小块颜色做区分，浏览器视图放大到最大倍数，如果还是看不清的话，推荐大家亲手试一试，

总结

到这里我的方法讲完了，在最后欢迎大家讨论，方案不止一个， orange 目前只发现这一个方案，你也可以根据 js 判断屏幕然后给出 .5 像素的偏移也是可行的，我个人认为此方法简单一些。

文章出自 orange 的个人博客 http://orangexc.xyz/

云服务器 GPU云服务器以内的素数 java 100ms以内的国外主机 JS轻松实现CSS设置 webrtc 移动端实现

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111665.html

CSS 行内对齐的黑魔法

摘要：魔法完整代码如下今日瞎选篇以上代码运行效果和之前一摸一样这里就不一一截图费大家流量啦良心前端。。。。对这个属性不熟悉的朋友可以去看的文档几种语法如下我们用的这个长度单位实际应用较少，却是行内元素垂直对齐的黑魔法。 showImg(https://segmentfault.com/img/bVbhrMS?w=2936&h=1152); 本文和以前的文章类似，orange 尽量带给大家分享...

enda 2019-08-29 11:25 评论0 收藏0
【零基础入门】 css学习笔记（2）盒模型

摘要：盒模型，盒模型看待元素的一种方式，它将每个元素看作由一个盒子表示。盒子实际占用的大小是左左右右，属性细节一个块元素的默认宽度是，表示它会自动延伸占满可用的空间。表示元素之间的距离，在边框外部。不能对和指定颜色，添加任何装饰。盒模型 1，盒模型： CSS看待元素的一种方式，它将每个元素看作由一个盒子表示。 2，五个属性：从内往外： width:内容的宽度，而不是盒子的宽度； hei...

mrcode 2019-08-30 15:53 评论0 收藏0
移动端UI设计规范指南

摘要：基础概念元素设计规范版式设计规范文字使用规范颜色使用规范输出规范交互介绍总结在开始设计之前必须搞清楚物理像素逻辑像素倍率三个词。依然可用设计只是高度增加了，尺寸注意状态栏的高度由原来的变成了，另外底部要预留的主页指示器的位置。从事UI设计，一直没看到完整版的UI设计规范学习资料，特此总结整理方便大家学习交流~ showImg(https://segmentfault.com/img/...

stonezhu 2019-08-30 15:44 评论0 收藏0
HTML+CSS基础课程-imooc-【更新完毕】

摘要：包含后代选择器包含选择器，即加入空格用于选择指定标签元素下的后辈元素。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过进行选择。 6-1 认识CSS样式 CSS全称为层叠样式表 (Cascading Style Sheets)，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。使用CSS样式的一个好处是通过定义某个样式，可...

Heier 2019-08-01 15:04 评论0 收藏0
【移动适配】一个像素的border怎么实现

摘要：根据上面的图片，安卓手机，属于，转换系数是因此这台手机中，个像素物理像素。这个转换系数，也等同于，设备像素比。 showImg(https://segmentfault.com/img/bVtcMA);一个像素里复杂纷扰的世界文 | 啃先生 Mar.3rd.2016 首发于微信公众号（啃先生）上一篇发了《【移动适配】移动Web怎么做屏幕适配》，现在继续。壹 | Fisrt 在...

SoapEye 2019-08-19 17:45 评论0 收藏0