КОД ДЛЯ АДАПТАЦИИ ПРОМЕЖУТКОВ БОЛЬШИХ ЭКРАНОВ
В современном мире существует множество устройств, и все они разные по экранам, ОС и т.д. На разных устройствах веб-проекты выглядят по-разному. Разработчики умудряются подобрать такой код, чтобы конструкция сайта и контент были более-менее сносными для отображения на разных устройствах. В большинстве случаев адаптация состоит из трёх вариантов: смартфоны, планшеты, компьютеры. В таких вариантах не учитываются «промежуточные разрешения экранов». Я предлагаю вам взглянуть на рисунок ниже.
Как вы видите, вариантов много.
Меня зовут Владимир Родичев, я веб-разработчик. Сегодня я хочу представить вам код, который поможет вам в адаптации собственных ресурсов.
Этот код для больших экранов, он затрагивает «промежуточные разрешения» от 992px до 1920px, путём маштабирования, чтобы не работать над каждым элементом в частности. Где за основу взято 1920px, потому что именно для такого разрешения строился оригинал. Всегда нужно исходить от оригинального разрешения для адаптации остальных.
В данном решении использовалась формула: ширина разрешения (которое необходимо адаптировать) поделить на ширину разрешения (оригинала), умножить на 100, отнять 100. По этой формуле вы можете рассчитать самостоятельно те участки, которые вам нужно адаптировать.
ПЕРВЫЙ ВАРИАНТ КОДА - ТОЛЬКО ДЛЯ УСТРОЙСТВ:
@media only screen and (min-device-width: 0px) and (max-device-width: 991px) {
html {
zoom: 100%;
}
}
@media only screen and (min-device-width: 992px) and (max-device-width: 1024px) {
html {
zoom: 53.33333333333333%;
}
}
@media only screen and (min-device-width: 1025px) and (max-device-width: 1152px) {
html {
zoom: 60%;
}
}
@media only screen and (min-device-width: 1153px) and (max-device-width: 1200px) {
html {
zoom: 62.5%;
}
}
@media only screen and (min-device-width: 1201px) and (max-device-width: 1280px) {
html {
zoom: 66.66666666666667%;
}
}
@media only screen and (min-device-width: 1281px) and (max-device-width: 1360px) {
html {
zoom: 70.83333333333333%;
}
}
@media only screen and (min-device-width: 1361px) and (max-device-width: 1366px) {
html {
zoom: 71.14583333333333%;
}
}
@media only screen and (min-device-width: 1367px) and (max-device-width: 1400px) {
html {
zoom: 72.91666666666667%;
}
}
@media only screen and (min-device-width: 1401px) and (max-device-width: 1408px) {
html {
zoom: 73.33333333333333%;
}
}
@media only screen and (min-device-width: 1409px) and (max-device-width: 1440px) {
html {
zoom: 75%;
}
}
@media only screen and (min-device-width: 1441px) and (max-device-width: 1536px) {
html {
zoom: 80%;
}
}
@media only screen and (min-device-width: 1537px) and (max-device-width: 1600px) {
html {
zoom: 83.33333333333333%;
}
}
@media only screen and (min-device-width: 1601px) and (max-device-width: 1680px) {
html {
zoom: 87.5%;
}
}
@media only screen and (min-device-width: 1681px) and (max-device-width: 1920px) {
html {
zoom: 100%;
}
}
ВАРИАНТ ВТОРОЙ – ДЛЯ ШИРИНЫ И УСТРОЙСТВ:
@media (max-width: 991px) and (min-width: 0px) {
html {
zoom: 100%;
}
}
@media (max-width: 1024px) and (min-width: 992px) {
html {
zoom: 53.33333333333333%;
}
}
@media (max-width: 1152px) and (min-width: 1025px) {
html {
zoom: 60%;
}
}
@media (max-width: 1200px) and (min-width: 1153px) {
html {
zoom: 62.5%;
}
}
@media (max-width: 1280px) and (min-width: 1201px) {
html {
zoom: 66.66666666666667%;
}
}
@media (max-width: 1360px) and (min-width: 1281px) {
html {
zoom: 70.83333333333333%;
}
}
@media (max-width: 1366px) and (min-width: 1361px) {
html {
zoom: 71.14583333333333%;
}
}
@media (max-width: 1400px) and (min-width: 1367px) {
html {
zoom: 72.91666666666667%;
}
}
@media (max-width: 1408px) and (min-width: 1401px) {
html {
zoom: 73.33333333333333%;
}
}
@media (max-width: 1440px) and (min-width: 1409px) {
html {
zoom: 75%;
}
}
@media (max-width: 1536px) and (min-width: 1441px) {
html {
zoom: 80%;
}
}
@media (max-width: 1600px) and (min-width: 1537px) {
html {
zoom: 83.33333333333333%;
}
}
@media (max-width: 1680px) and (min-width: 1601px) {
html {
zoom: 87.5%;
}
}
@media (max-width: 1920px) and (min-width: 1681px) {
html {
zoom: 100%;
}
}
Пользуйтесь.
Источник: www.usphere.ru
