Как работает @media ?
Неуказанный тип означает all:@media (max-width: 768px) {...}
@media all and (max-width: 768px) {...}
Второе только для экранов мониторов. Не будет применятся на телевизорах, проекторах, при печати, смартфонах (ios и android 100% пофиг на handled).