时间戳

首页 > 解决方案 > CSS/SCSS 的不同渲染行为

html - CSS/SCSS 的不同渲染行为

问题描述

我尝试将这个示例集成到一些跳跃点，作为延迟加载其他一些脚本和图像的后备。

但是如果我更改 css，如下例所示，在我的示例中，最后一个点看起来比其他两个点小（宽度更小？）。通过在我的codepen 示例中使用相同的输入 scss 值，点看起来符合预期：

本次渲染： Codepen 渲染：这个渲染 在此处输入图像描述

我还检查了计算的样式，我只能看到跨度元素的计算高度和宽度值的差异。

与 codepen 上的示例相比，为什么我在 stackoverflow 上的这个代码示例（以及我的 localhost node.js 示例）中看到不同的渲染？

我是否必须查看 codepen 示例中的所有父 DOM 元素才能获得缺少的 css 部分？

class App extends React.Component {
	constructor(props) {
		super(props);

		this.state = {};
    
    }

    render() {
        return (
            <div id="wave">
                <span className="dot">
                </span>
                <span className="dot">
                </span>
                <span className="dot">
                </span>
            </div>
        );
    }
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
);
html, body {
   margin:0;
   padding:0;
}

body {
   background:#F6F7F8;
}

div#wave {
   position: relative;
   margin-top: 5vh;
   text-align: center;
   width: 100px;
   height: 100px;
   margin-left: auto;
   margin-right: auto;
}

div#wave .dot {
   display: inline-block;
   width: 6px;
   height: 6px;
   border-radius: 50%;
   margin-right: 6px;
   background: #303131;
   animation: wave 1.3s linear infinite;
}

div#wave .dot:nth-child(2) {
   animation-delay: -1.1s;
}

div#wave .dot:nth-child(3) {
   animation-delay: -0.9s;
}

@keyframes wave {
   0%, 60%, 100% {
      transform: initial;
   }

   30% {
      transform: translateY(-15px);
   }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.production.min.js"></script>

<div id='container'></div>

我正在使用 chrome 浏览器（版本 83.0.4103.97），如果这有什么不同的话。

标签： htmlcsssass

解决方案

我数了数你的圆圈的像素，都是7px，最后一个是6px宽（理论上是你的CSS唯一的权利）：

像素数

在我看来，当 Windows10 上的显示器按比例放大（大于或小于 100%）时： https ://www.windowscentral.com/how-set-custom-display-scaling-setting-windows-10在 Windows10 上更改比例

这也会在网站上产生很多像素艺术错误！我将屏幕的比例更改为 120%，中间的圆圈变粗，但如果我回到 100%，它会恢复正常。

我做过一些像素艺术项目，收到一些用户的投诉，我无法重现错误，然后有一天我弄乱了这个windows功能并注意到错误，它是windows屏幕的比例，它通过“自定义比例”扭曲了一些像素。

从理论上讲，它总是会给出该函数的错误，除非它是 100% 的倍数，例如 200% 或 300%，因为理论上像素的大小不会因该值而失真。

我不知道是否有解决方案，我从来没有找到，因为 Windows 无法尝试在“不存在”的地方调整像素

推荐阅读