По идее диапазоны пишут так, чтобы не было перекрытия, т.е. если брейкпоинт на 768, то выделяем 2 диапазона:
1) 768+
2) 0 - 767
соответственно:
@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}
Но тут есть нюанс, мы теряем пиксель между 767 и 768. В текущих реалиях, когда css и device pixels давно не равны, когда кругом все масштабируется ( и соответственно где-то внутри округляется) - все может быть. Поэтому дельту в пиксель уменьшают до 0.02px. Почему именно такая велична, сходу не нагуглю. Возможно , чисто эмпирическим путем выяснили что 0.01 не работает, например ))
похожая тема на стеке
upd:
а, ну вот там и ответ:
// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
// See https://bugs.webkit.org/show_bug.cgi?id=178261