How to avoid pixel distortion in HTML elements in varying display settings?

In certain situations html elements that use pixels are not always rendered as imagined, a simple example is when a person adjusts the browser zoom to about "100%", so depending on the position and zoom one element of height equal to the other seems to be a smaller pixel.

One example is the StackOverflow site menu itself, example with "175%" zoom:

Note that the third menu bar appears larger than the others and that the spacing of the first and second bars also appears larger.

This is not just about "zoom", I tested it on a colleague's notebook with Windows10 and GeForce® GTX 1050 card (of course I understand that in part modern computers render with the "integrated card") and it uses in the Windows display settings for the operating system all the value of 125%:

Using this, I realized that the same problem occurs (even with 100% zoom in the browser).

The only displays that I noticed that the problem does not occur are those of retina displays (and similar "technologies"), because they use a higher "pixel density".

But the question is NOT about monitors, displays and market technologies, the question is how to avoid the problem on normal screens when the user adjusts something (like example in Windows10 with 125% on display settings), noting that it varies with resolution and even the monitor and is "unpredictable".

I tried to work with other units of measure (em, pt, rem, %), but the problem persisted.

So here goes my question:

• How to prevent pixel rendering on elements from being distorted in display settings that may vary?

An example that the problem occurs (chance adjust the source of the "OS" or the zoom):

*, ::after, ::before {
    box-sizing: border-box;
}

body {
    background-color: #007bff;
}

.v-navbar-toggle {
    vertical-align: middle;
    position: relative;
    cursor: pointer;
    display: inline-block;
    background: none;
    outline: 0;
    border: none;
    padding: 10px 8px;
    color: #fff;
    margin: 0;
}

.v-icon-bar {
    background-color: currentColor;
    overflow: hidden;
    display: block;
    width: 24px;
    height: 2px;
    border-radius: 1px;
}

.v-icon-bar+.v-icon-bar {
    margin-top: 4px;
}

<button class="v-navbar-toggle"><i class="v-icon-bar"></i><i class="v-icon-bar"></i><i class="v-icon-bar"></i></button>

Note: I also noticed that working with svg (depends on how you use it) or icon-fonts works a lot better compared html+css, but what I am trying to solve are problems with simple "html elements".