浏览器是以 1 / 64 px 为单位而非整数 1px 来计算盒子尺寸与布局的，这使百分比、计算、小数点式的尺寸值成为可能，当然也会造成精度丢失。
这是因为 100px 宽的容器，内部有 6400 个 1 / 64px 的显示单位。66.5px 宽是占用 4256 个显示单位，33.5px 宽是 2144 个显示单位，4256 + 2144 = 6400，当然是可以塞进去的。虽然两个盒子最终会被渲染成 67px 与 33px 宽，但这并不是简单四舍五入的结果，而是图像引擎较为底层的处理。
如果像素宽度在乘以 64 倍后依然有小数点，那么不同浏览器会采用不同策略（向上或者向下取整）来判定实际的宽度，但一定会进行取整，因为这是最小的处理显示单位。
总之，渲染盒子尺寸的过程可以概括为：
在样式中设置尺寸（包括通过百分比、calc() 等计算后的）
将尺寸转换为 1 / 64px 的最小单位并取整——在这一步会有精度丢失
渲染实际尺寸——可以用 element.getBoundingClientRect() 来看到浏览器实际渲染时的尺寸。
浏览器是以 1 / 64 px 为单位而非整数 1px 来计算盒子尺寸与布局的，这使百分比、计算、小数点式的尺寸值...
CGRectIntegral()这个函数可以将小数类型的值转为整型frame的数值为小数时，像素渲染到屏幕上时会产...
最近跟进的一个项目，其中涉及到「含小数像素」的渲染问题，在查阅了一番资料之后，有了全新的认识。 以下为相关链接，等...
前端工程师为什么需要明白浏览器渲染？ 像素完美（Pixel Perfection）、分辨率无关（Resolutio...
像素是小数时，浏览器中是怎么显示的？ 比如11.9px是显示为12px还是11px? 关于html与body标签的...
像素比 点、points （抽象单位 ） 像素渲染 （栅格化） 物理像素 （调整大小） dpi、p...
浏览器从接收到服务器返回的HTML到渲染像素到屏幕上，中间经历了很多的步骤。浏览器初次绘制网页的必经过程称之为“关...
1 . 浏览器如何渲染? 浏览器的渲染原理简介 专题：浏览器:渲染重绘、重排两三事 浏览器加载和渲染HTML的顺序...
什么是子像素渲染？ LCD 屏幕上的一个像素是由红绿蓝三个子像素构成的，LCD 屏幕能够做到单独控制每一个子像素的...
开门见山 1. 多次写入像素 在渲染不透明的像素时，只需要写入一次 在渲染透明像素时，每个像素至少需要写入两次 第...
本文标题：浏览器渲染小数像素
本文链接：https://www.haomeiwen.com/subject/eivdvttx.html
网友评论