Не используйте разрешения экранов конкретных устройств
/* ipad portrait */
@media screen and (min-width: 768px;) {}
/* ipad landscape */
@media screen and (min-width: 1024px;) {}
/* iphone */
@media screen and (min-width: 320px) and (max-width: 480px;) {}
Это разрешения для устройств Apple с «магическими» значениями 768px и 1024px. А что если у пользователя экран 1025px или 1023px? Медиа-запросы не сработают, и стили под это устройство не применятся. Иногда может возникнуть потребность в точных значениях разрешений экрана, но такой код считается признаком плохого тона. Так как же поступить?
Лучше задать произвольные целочисленные точки, которые приблизительно совпадают с разрешениями большинства смартфонов, планшетов, настольных ПК и ноутбуков. Иногда они могут меняться в зависимости от проекта:
/* большие телефоны и маленькие планшеты */
@media screen and (min-width: 500px;) {}
/* планшеты и маленькие мониторы */
@media screen and (min-width: 800px;) {}
/* ноутбуки и настольные ПК */
@media screen and (min-width: 1200px;) {}
Эти точки не ограничивают дизайн, а задают хорошую почву для работы с тремя типами устройств. Можно задать промежуточные точки, полируя мелкие детали.
/* промежуточная позиция для кнопки репоста */
@media screen and (min-width: 1150px;) {
margin-right: 1em;
}
Используйте вместо px относительные единицы измерения для лучшей масштабируемости на случай, если пользователь увеличит страницу или размер текста. Например, основные точки с единицами измерения em могут выглядеть следующим образом.
/* 500px / 16px = 31.25em */
@media screen and (min-width: 31.25em;) {}
/* 800px / 16px = 50em */
@media screen and (min-width: 50em;) {}
/* 1200px / 16px = 75em */
@media screen and (min-width: 75em;) {}