能否设置元素为精确整数值尺寸？无需手动指定整百整千像素值

我手动设置元素尺寸时，比如1000px能在开发者工具里显示精确的1000px，但1015px这类数值却总是显示成1014.98999这类带小数的结果。试过用JavaScript的取整方法设置尺寸，问题依旧，只有手动指定1000、500、200px这类整百整千数值时，才能显示无小数的精确值。想问：不用手动指定这类数值，能不能让元素尺寸显示为精确的整数值？

相关代码示例 #

HTML #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Platform Jumper</title>
  <link rel='stylesheet' href='styles.css'>
  <script defer src='script.js'></script>
</head>

<body>
  <div id="Game_board"></div>
</body>

</html>

CSS #

body,
head {
  width: 100vw;
  height: 100vh;
  background-color: black;
  margin: 0;
  padding: 0;
}

#Game_board {
  background-color: darkgrey;
}

JavaScript #

const Board = document.getElementById('Game_board')
const BodySize = [document.querySelector('body').getBoundingClientRect().width, document.querySelector('body').getBoundingClientRect().height]
const roundedBodySize = [Math.round(BodySize[0]), Math.round(BodySize[1])]
const BoardSize = [Math.round(roundedBodySize[0] * 0.75), Math.round(roundedBodySize[1] * 0.75)]

Board.style.width = (Math.round(BoardSize[0])) + 'px'
Board.style.height = BoardSize[1] + 'px'
Board.style.position = 'absolute'
Board.style.top = 12.5 + '%'
Board.style.left = 12.5 + '%'

1. 问题根源 #

这是**设备像素比（DPR）**导致的：浏览器会把CSS像素转换成屏幕物理像素，当你的计算值无法被DPR整除时，浏览器会做亚像素渲染，从而在开发者工具里显示小数尺寸。比如DPR=1.25时，1015px对应的物理像素是1268.75，浏览器为了平滑渲染就会出现小数CSS尺寸。

2. 具体解决方法 #

方法一：按设备像素比校准尺寸

计算时把目标尺寸调整为能被DPR整除的数值，确保CSS像素转物理像素是整数：

const Board = document.getElementById('Game_board');
const bodyWidth = document.documentElement.clientWidth;
const bodyHeight = document.documentElement.clientHeight;
const dpr = window.devicePixelRatio || 1;

// 先按比例计算，再校准为DPR的整数倍
const boardWidth = Math.round((bodyWidth * 0.75) * dpr) / dpr;
const boardHeight = Math.round((bodyHeight * 0.75) * dpr) / dpr;

Board.style.width = `${boardWidth}px`;
Board.style.height = `${boardHeight}px`;
Board.style.position = 'absolute';
Board.style.top = '12.5%';
Board.style.left = '12.5%';

这里用documentElement.clientWidth替代getBoundingClientRect，避免滚动条影响尺寸计算。

方法二：用CSS原生取整函数（现代浏览器支持）

直接在CSS里用round()函数对尺寸取整，不用写JS：

#Game_board {
  position: absolute;
  top: 12.5%;
  left: 12.5%;
  width: round(75vw, 1px);
  height: round(75vh, 1px);
  background-color: darkgrey;
}

这个函数会把75vw/75vh的结果自动取整为最接近的1px倍数，简单高效。

方法三：强制关闭亚像素渲染（不推荐）

通过CSS属性禁止亚像素处理，但可能导致元素边缘模糊：

#Game_board {
  image-rendering: -webkit-crisp-edges;
  image-rendering: crisp-edges;
}

仅适合对精度要求极高、可以接受边缘瑕疵的场景。

3. 额外提醒 #

• 尽量不要同时用vw/vh和JS计算尺寸，避免双重转换带来的误差；
• 如果页面有滚动条，100vw会包含滚动条宽度，建议用clientWidth/clientHeight获取可视区域尺寸。

内容的提问来源于stack exchange，提问作者Pscx1