Разница между операторами and и comma в медиа-запросах заключается в их функциях.

Оператор and используется для объединения нескольких медиа-функций в одном запросе. 12 При этом для выполнения запроса необходимо, чтобы каждая из объединённых функций вернула истину. 2 Например: @media screen and (min-width: 800px) { article { padding: 1rem 3rem; } }. 1 В этом запросе стили будут применяться ко всем устройствам, кроме принтеров, с шириной экрана, равной или большей 800px. 1

Оператор comma позволяет включить список медиа-запросов. 1 Если любой из запросов вернёт истину, будут применены стили или стилистические листы. 2 Каждый запрос в списке рассматривается как отдельный, и любой оператор, применённый к одному запросу, не влияет на другие. 2 Например: @media screen and (min-width: 800px), print and (min-width: 1000px) { article { padding: 1rem 3rem; } }. 1 В этом запросе стили будут применяться к одному из двух запросов, разделённых запятой. 1