How to handle media queries in Chrome?

Question

css

There is a media query:

body {
    font: 400 16px/18px sans-serif;
}
@media (min-width: 20em) and (max-width: 48em) {
    ...
}

When narrowing the browser window, the media query fires at 816px instead of the expected 768px (816 = 768 + 48).
I tried different numbers, the result is always the same: min-width: Xem fires at X * 16 + X
Has anyone come across this?

Answer 1

The fact is that in the webkit, the side scrollbar is included in the width of the browser window, before the difference was 17px.
stackoverflow.com/questions/8146874/issue-with-css...