✎ Размер ширина высота сайта или фото в зависимости от разрешения экрана браузера - универсальный резиновый дизайн - Media CSS.
- Подробности
- Просмотров: 3475
Размер ширина высота сайта или фото в зависимости от разрешения экрана браузера - универсальный резиновый дизайн - применяем свойство @media.
Все значения тестировались и вводились не один день. И лишь методом проб и ошибок получилось то что получилось... А получилось вполне себе резиновое - универсальное представление корректно и стильно отображающие содержимое - будь то фото или например блок теста в размере полностью помещающимся на любом экране и имеющий минимальный стилистический отступ сверху с низу порядка 1 см.
Итак, добавляем в свой файл таблиц стилей style.css блок с ориентировкой по высоте (ширины как правило и так всегда с излишком):
@media (max-width: 1920px) and (min-width: 1682px)
{
.box { /* max-width: 1680px; */ max-height: 870px; width:auto!important;-ms-interpolation-mode:bicubic;}
}
/* Комментарий: Если разрешение экрана меньше 1920px, но больше 1682px тогда применяется следующее за ним свойство
.box { max-height: 870px; width:auto!important;
-ms-interpolation-mode:bicubic;} - интерполяция изображения при уменьшении дают более сглаженные линии и лучшее качества изображения, даже чем оригинальное. */
@media (max-width: 1681px) and (min-width: 1442px)
{
.box { max-height: 835px; width:auto!important;-ms-interpolation-mode:bicubic;}
}
@media (max-width: 1441px) and (min-width: 1368px)
{
.box { /* max-width: 1367px; */ max-height: 685px; width:auto!important;-ms-interpolation-mode:bicubic;}
}
@media (max-width: 1367px) and (min-width: 1282px)
{
.box { /* max-width: 1281px; */ max-height: 555px; width:auto!important;-ms-interpolation-mode:bicubic;}
}
@media (max-width: 1281px) and (min-width: 1026px)
{
.box { /* max-width: 1125px; */ max-height: 670px; width:auto!important;-ms-interpolation-mode:bicubic;}
}
@media (max-width: 1025px) and (min-width: 802px)
{
.box { /* max-width: 940px; */ max-height: 555px; width:auto!important;-ms-interpolation-mode:bicubic;}
}
Затем используем свойство <div class="box "> - для оформления контекста.
Здесь приведены все наиболее часто встречающиеся разрешения экранов
браузеров вплоть до планшетов, с учетом возможного различного количества панелей браузеров уменьшающих эффективное экран где непосредственно выводиться представляемая информации.
С мобильными устройствами использовать данное свойство не имеет особого смысла. Так как с одной стороны если у вас есть мобильная версия сайта, то будет выводиться она с соответствующими собственными адаптированными свойствами таблицы стилей, а если нет мобильной версии, то тот же андройд самостоятельно по собственному алгоритму без учета стандартных таблиц стилей уменьшает размер картиной на сайте под свое разрешение экрана как и впрочем и переформатирует текст сайта для более менее комфортного изучения контекста сайта..
Чтобы увидеть его в действии, как правило не нужно менять разрешение экрана в свойсвах Windows, достаточно уменьшить размеры окна браузера и обновить страницу сайта.
В зависимости от разрешения @media загружаем определенный файл таблиц стилей CSS
CSS стили приведенные выше мы добавляли в общий файл стилей, но по желанию можно делать несколько по другому - изначально определяясь какой файл с каким преставлением грузить в браузер, тем самым уменьшая размер файлов стилей:
<link rel='stylesheet' href='default-style.css' />
<link rel='stylesheet' media='(min-width: 1920px)' href='large_ screen .css' />
<link rel='stylesheet' media='(max-width: 1599px) and (min-width: 800px)' href='average_ screen .css' />
<link rel='stylesheet' media='(max-width: 799px)' href='small_screen.css' />
.....
Подробнее о свойствах @media можно ознакомиться здесь - https://www.w3.org/TR/CSS2/media.
