Оптимизация сайта под разные разрешения экрана
Недавно был заказ сверстать сайт, где на главной странице распологались герои журнала. И эти герои и есть навигационное меню. Соответственно вырезал картинку и загнал ее в линк так:
Все выровнил, как пологается т.е сделал прилепающий футер и если высота экрана не меньше 800 пикселей, то масштабирование происходит на ура, но переходим на ноутбук диагональ которого 15. Появляется скролл-принял решение уменьшить картинки и подгружать их через CSS3
@media all and (max-width: 800px) и тут должен идти другой стиль для данного разрешения. Вопрос: как мне в CSS можно в тэг загнуть другую картинку, ту, что поменьше масштабом? (кажется, это адаптивная верстка называется)
Как оптимизировать сайт под разные разрешения экрана?
Здравствуйте!
Я создал сайт со своим дизайном и попросил друзей открыть сайт и у многих у кого разрешение больше или меньше моего у них сайт расходился по швам или сжимался. Как решить эту проблему?
- Вопрос задан более трёх лет назад
- 27722 просмотра
Комментировать
Решения вопроса 0
Ответы на вопрос 5
Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать
С самого начала использовать Bootstrap, Foundation и т.п и тогда никаких проблем с разрешениями экранов не будет (если всё грамотно делать).
Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать
Верстаю, фронтэндю =)
Сменить друзей. или вариант по-добрее — найти нормального верстальщика =)
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Junior front-end developer
По гуглите про адаптивную вёрстку , а также про @media в css. Это вам поможет, но работки у вас прибавится=) Удачи
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Инженер и вэб-дизайнер, рисую.
Вы прежде чем просить друзей — попробуйте поменять масштаб или размер окна браузера — много нового откроете для себя. Подсказка — при всех таких манипуляциях сайт должен или показываться хорошо, или появляться горизонтальный скролл.
В остальном — учите матчасть, Вы явно плаваете.
Media queries CSS как АДАПТИРОВАТЬ сайт
CSS3 Медиа-запросы (Media queries CSS), позволяют реализовать как адаптивный веб-дизайн так и всякого рода оформление. В данном материале по свешенным Media queries мы реализуем пример как делаются адаптивные сайты.
See the Pen aVRZxO by Denis (@Dwstroy) on CodePen.
Из видео вы узнаете:
- что такое Media queries и его составляющие элементы;
- как формируется медиа запросы;
- рассмотрим практически пример адаптивного дизайна сайта.
CSS3 медиа запросы или (media queries) – это определенный набор стилей и логических выражений, которые позволяют применять различные стили в зависимости от выполнения каких то дополнительных условий.
Используются для проверки ширины и высоты окна браузера, а также ширины и высоты экрана устройства, проверки его ориентации (альбомная или портретная) и многое другое.
Медиа запрос состоит
@media screen and (max-width: 480px) < h1 < font-size: 25px; >>
Медиа запрос состоит из типа носителя , одного или нескольких условий , что представляет собой логическое выражение , которое может быть истинным или ложным, и это все позволяет проверять какие-то свойства самого устройства.
Типы носителя
В се запросы начинаются с правила @madia , далее идет условие, в котором пишем тип носителя (screen) , он позволяет получить точную информацию, на каком устройстве открыта данная страница. Помимо этого типа имеются и другие носители как print , all и speech .
Типы носителей включают в себя
- all – Подходит для всех видов устройств. Это значение используется по умолчанию.
- print – Просмотр на экране страничек в режиме предварительного просмотра печати.
- screen – Просмотр на экране цветных компьютерных мониторах.
- speech — Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.
В CSS2.1 имелись несколько дополнительных типов, но они приняты устаревшими и в Media Queries 4 не задействованы.
Устаревшие типы носителей:
- braille — Устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми.
- embossed — Принтеры, использующие для печати систему Брайля.
- handheld — Смартфоны и аналогичные им аппараты.
- projection – Проекторы.
- tty — Устройства с фиксированным размером символов (телетайпы, терминалы, устройства с ограничениями дисплея).
- tv – Телевизоры.
В большей степени используются два типа носителей print и screen , так как они включают в себя любое устройство для отображения на экране, и самое главное поддерживаются большинством браузеров.
Логические операторы
З атем идут логические операторы, при помощи которых можно писать дополнительные условия, если это необходимо.
К примеру, and , эквивалентно «И» , и в этом случае если одно из условий будет не истиной значить и все выражение, является ложью.
Следующий оператор «запитая» , которая эквивалентна «ИЛИ» , и в данном случае если одно из условий верное, значит выражение является истиной.
Оператор not отрицание, а only позволяет скрыть стиль от всех браузерах, которые не поддерживают данное условие.
Логические операторы:
- and – Связывает друг с другом разные условия (эквивалентно «и»);
- not – Позволяет сработать медиа запросу в противоположном случае (эквивалентно «отрицание»);
- only – Скрывает стили для браузера, которые не поддерживают данные условия;
- , — Запятая работает по аналои с логическим оператором or (эквивалентно «или»);
Условие медиа запроса
Затем идет условие, где можно задавать ширину области просмотра, ее высоту, проверять соотношение сторон, ориентацию, разрешения экрана в пикселях и так далее. В принципе их там не много, более подробный список будет в описании под роликом.
Самые распространенные условия это максимальная и минимальная ширина max-width min-widt
Прописав ( max-width: 480px ), сам стиль в нутрии скобок будет применен в том случае, когда ширина экрана менее 480 пикселей.
Именно на таких примерах базируется адаптивная верстка, когда нам нужно применить стили под определенные расширения экраны мобильного устройства и все это делается через CSS (media queries).
- width min-width max-width – ширина;
- height min-height max-height – высота;
- device-width min-device-width max-device-width – ширина на устройстве;
- device-height min-device-height max-device-height orientation — высота на устройстве;
- aspect-ratio min-aspect-ratio max-aspect-ratio – соотношение сторон;
- device-aspect-ratio min-device-aspect-ratio max-device-aspect-ratio — соотношение сторон на устройстве;
- resolution min-resolution max-resolution – разрешение экрана (количество пикселей);
- color min-color max-color – количество бит на каждые из цветных компонентов устройства вывода;
- color-index min-color-index max-color-index – количество записей в таблице подставноки цветов;
- monochrome min-monochrome max-monochrome – количество битов на пиксель монохромного устройства;
- scan grid – сетка сканирования;
Описываем основную структуру в HTML и CSS
Теперь рассмотрим, как это выглядит в действительности на примере создания простенького каркаса сайта.
Создаем пять блоков, шапка сайта header , верхнее меню top_menu , левый сайт бар sideLeft , область для контента content и подвал footer .
Затем определим для них стили
Для header назначим свой цвет, укажем ширину в 100%, высоту в 200 пик. и закруглим углы.
.header
Верхнему меню назначим, свой цвет, ширину в 100%, сделаем отступ сверху в 5 пик., высоту в 50 пик.
.top_menu
Сайт бару, прописываем свои стили и прижмем его к левому краю:
.sideLeft
Далее для области под контент пишем свои стили:
.content
И завершающий блок это футер, делаем его на всю ширину в своем цвете:
.footer
Из-за того что sideLeft и content являются плавающими элементами за счет float , нужно сбросить обтекание этих блоков при помощи clear:both; .
Создадим класс и вставим дополнительный блок с этим классом:
.clear
У нас получился такого рода резиновый шаблон сайта, условно разделенный на блоки.
Подключаем CSS media queris
Для наглядной адаптации, сделаем шаблон фиксированной ширины, обернем все наши блоки в обертку, назначим обертке ширину в 980 пик. и отцентрируем по середине экрана.
.wrapper
Затем для всех медиа запросов создадим отдельный файл media-queries.css , который подключим после основного стиля.
Размер экрана меньше 992px
Открываем файл media-queries.css на редактирование, и напишем свое условие для дестопных экранов.
Начинаем с правила @media , скрываем стиле для браузеров которые их не поддерживают only , затем пишем носитель screen и логический оператор and « И », далее условие максимально ширины в 992 пик. то есть если страничка будет меньше данной ширины тогда применим наши стили.
Затем, в фигурных скобках описываем стили для данного расширения:
/* Medium Devices, Desktops */ @media only screen and (max-width : 992px)
Ширину обертки уменьшим на 750 пик.
.wrapper
Поменяем у блоков цвет, а у footer немного уменьшим высоту:
.wrapper < width: 750px; >.header < background: #a1ece5; >.top_menu < background: #64f1eb; >.sideLeft < background: #80e47e; >.content < background: #f0f1ef; >.footer < background: #9ea424; height: 45px; >>
Размер экрана меньше 768px
Затем опишем медеа запрос для средних экранов, таких как планшеты. Я скопирую предыдущий стили, заменю максимальную ширину на 768 пик. и в нем опишу стили для данного расширения экрана.
/* Small Devices, Tablets */ @media only screen and (max-width : 768px)
Обертку уменьшаем до 450 пик.
.wrapper
У header поменяем цвет, его высоту, и сделаем радиус в 3 пик.
.header
Тоже самое проделаем с top_menu
.top_menu
Левый сайт бар, меняем цвет, делаем по всей ширине, уменьшаем отступ до 4 пик. убираем обтекание.
.sideLeft
Для наглядности добавим в сайт бар дополнительные блоки и оформим их надлежащим образом.
Убираем высоту .sideLeft
Для блока под контент, меняем цвет, делаем ширину в 100%, отступ в 4 пик, уменьшаем высоту и убираем обтекание.
.content
Затем footer немного уменьшим по высоте, цвет и отступ немного подкорректируем:
.footer
Давайте для топ меню добавим иконку в виде кнопки как на мобильных устройствах и для этого создаем дополнительные блоки.
Затем опишем общие стили, и скроем их:
.top_menu < background: #87c5ff; width: 100%; margin-top: 5px; height: 50px; position: relative; >.knopka < display: none; width:32px; height: 21px; top: 2px; left: 6px; background: #6d6e6d; border-radius: 2px; position: absolute; >.lan
Размер экрана меньше 480px
Затем опишем стили под маленькие расширения экранов которые подходят под мобильные устройства.
/* Extra Small Devices, Phones */ @media only screen and (max-width : 480px)
Делаем обертку в 320 пик.
.wrapper
У остальных блоков поменяем цвет.
.header < background: #3dfff2; >.top_menu < background: #328e8d; >.sideLeft < background: #91b399; >.content < background: #f2f4f2; >.footer < background: #6d6e6d; >>
Для более, плавных переходов, воспользуемся свойством transition, и применим его ко всем элементам.
На меленьких расширений правильней было бы, если после верхнего меню, сразу шел контент, а затем, правый сайтбар. Для того что бы реализовать это в нашем случае достаточно блок с контентом переместить выше сайтбара.
Подключаем Media Queries Javascript
Медио запросы не поддерживаются браузером Internet Explorer 8 и более ранних версий, для них нужно подключить дополнительный Javascript файл css3-mediaqueries.js .
Ссылка на скачивания — архив файлов с урока
Я показал базовые принципы адаптивного дизайна, но есть и другие методы которые во много раз упрощают данную работу. Следите за нашим сайтом и обязательно о них узнаете.
Как адаптировать сайт под разные разрешения
Рассказываем и показываем, как создавать удобные сайты, которые будут хорошо выглядеть на разных мониторах.
Евгений Кучерявый
Пишет о программировании, в свободное время создаёт игры. Мечтает открыть свою студию и выпускать ламповые RPG.
Многие разработчики слишком ленивы, чтобы хоть как-то адаптировать свой сайт: одни проверяют всё только под свой браузер, а другие игнорируют мобильные устройства.
Но чаще всего можно заметить, что сайты плохо адаптированы под разные мониторы и разрешения. Например, вот как выглядит «ВКонтакте» на FullHD-мониторе:
Шрифт очень маленький, а контент размещается только на небольшой части экрана. Чтобы комфортно пользоваться им, нужно менять масштаб страницы:
Встроенных настроек для этого нет, в отличие, например, от Telegram:
Такая адаптация — что-то вроде кибертолерантности. Мы должны заботиться об удобстве посетителей наших сайтов, какими бы устройствами, мониторами и браузерами (только не Internet Explorer) они ни пользовались. Поэтому в этой статье мы расскажем, как адаптировать сайт под разные разрешения.
За основу возьмём сайт из статьи про добавление тёмной темы . Читать её не обязательно, но там подробнее объясняется часть с PHP-скриптами. Также вы можете посмотреть исходный код этого сайта на GitHub.
Создаём адаптивные стили
Прежде всего нужно быть уверенным, что ваш сайт не сломается, если пользователь изменит разрешение на 1 пиксель (как это бывает в MS Word). Для этого везде, где только можно, размеры нужно указывать в процентах.
Также при создании сайта полезно помещать его в оболочку (wrapper): она растягивается на весь экран, а сам сайт будет масштабироваться относительно оболочки.
Тут ширина блока с текстом составляет 80% страницы. Если бы не это ограничение, чтение мелкого шрифта с больших мониторов превратилось бы в разминку шеи:
Также вы можете указать максимальную ширину в пикселях:
Создаём стили под отдельные разрешения
Как и в случае с тёмной темой, можно подготовить несколько файлов стилей, каждый из которых будет содержать разные размеры для элементов страницы. Начнём со стиля для средних мониторов — normal.css:
Обратите внимание, что блок с текстом для небольших экранов стал шире — это не тот случай, когда пустота красит страницу .
Автоматическое масштабирование
С помощью JavaScript мы можем проверить размер окна браузера пользователя и подключить тот файл стилей, который лучше подойдёт для страницы такого размера. Вот пример такого кода:
Заключение
Мы сможем отказаться от адаптации сайтов под разные мониторы только тогда, когда человечество откажется от мониторов. Ну а пока придётся мириться с тем, что существует огромное количество разрешений:
Не говоря уже о том, что на мобильных устройствах эти разрешения тоже воспринимаются по-разному.
Читайте также:
- JavaScript: главный инструмент frontend-разработчиков
- Держи в курсе: как и где разработчики обновляют свои знания
- Как установить локальный сервер на Windows