Как оптимизировать сайт под разные разрешения экрана?
Здравствуйте!
Я создал сайт со своим дизайном и попросил друзей открыть сайт и у многих у кого разрешение больше или меньше моего у них сайт расходился по швам или сжимался. Как решить эту проблему?
- Вопрос задан более трёх лет назад
- 27777 просмотров
Комментировать
Решения вопроса 0
Ответы на вопрос 5
Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать
С самого начала использовать Bootstrap, Foundation и т.п и тогда никаких проблем с разрешениями экранов не будет (если всё грамотно делать).
Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать
Верстаю, фронтэндю =)
Сменить друзей. или вариант по-добрее — найти нормального верстальщика =)
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Junior front-end developer
По гуглите про адаптивную вёрстку , а также про @media в css. Это вам поможет, но работки у вас прибавится=) Удачи
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Инженер и вэб-дизайнер, рисую.
Вы прежде чем просить друзей — попробуйте поменять масштаб или размер окна браузера — много нового откроете для себя. Подсказка — при всех таких манипуляциях сайт должен или показываться хорошо, или появляться горизонтальный скролл.
В остальном — учите матчасть, Вы явно плаваете.
Адаптация сайта под разные разрешения экрана (рекомендации)
Современные интернет пользователи просматривают веб страницы не только с настольного компьютера, но и с разных мобильных гаджетов. Если сайт сделан давно, то его ещё не затронула волна адаптивности, актуальная в 2020 году.
Адаптировать ваш сайт под разные разрешения экрана помогут профессиональные html верстальщики. Современного html верстальщика не нужно учить адаптивной верстке, это стало стандартом. Несколько лет назад можно было использовать фиксированную верстку.
Эра мобильных гаджетов оказала сильное влияние на веб-дизайн. С появлением мобильного интернета стало актуально удобство пользования веб ресурсами с гаджета. Адаптивная верстка сайта решает проблему некомфортного просмотра сайта без мобильной версии.
Понятие отзывчивого дизайна было введено в 2010 г. Итаном Маркотом. В 2011 г. Густафсон опубликовал издание под именем «Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement», повлекшее использование этого термина. Понятие применяется в среде веб-дизайнеров по сей день.
У прогрессивного html мастера в css таблице стилей присутствуют так называемые брейкпоинты. Брейкпоинт это инструкция для css правил, на каком разрешении эти правила будут работать. По этим точкам можно настроить как будет вести себя дизайн на том или ином гаджете.
Адаптация под разные разрешения экрана
У всех экранных устройств есть разрешение, в котором преобладает важность ширины. Для просмотра сайтов актуальны следующие разрешения:
- мобильное – 320px
- планшет – 768px
- ноутбук – 1440px
- настольный компьютер – 1920px
В дизайне сайтов также распространен подход отрисовки веб-страниц под разные устройства, для понимания верстальщику. Чтобы на каждом разрешении была красота рисуются 4 варианта дизайна. Тут следует заметить, что при небольшом бюджете можно поручить эту работу по адаптации на усмотрение верстальщика.
Но в целом, если вы дорожите аудиторией, то не помешает заказать веб-дизайн именно под 4 разрешения экрана. Т.к. верстальщики могут попортить дизайн при адаптации.
У вас есть необходимость в улучшении старого сайта под современные требования? Обращайтесь, вам поможет квалифицированная команда веб специалистов “Нужен сайт”. Для ваших клиентов мы создадим комфортный вид с любого гаджета!
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 .
Ссылка на скачивания — архив файлов с урока
Я показал базовые принципы адаптивного дизайна, но есть и другие методы которые во много раз упрощают данную работу. Следите за нашим сайтом и обязательно о них узнаете.
Оптимизация сайта под разные разрешения экрана
Недавно был заказ сверстать сайт, где на главной странице распологались герои журнала. И эти герои и есть навигационное меню. Соответственно вырезал картинку и загнал ее в линк так:
Все выровнил, как пологается т.е сделал прилепающий футер и если высота экрана не меньше 800 пикселей, то масштабирование происходит на ура, но переходим на ноутбук диагональ которого 15. Появляется скролл-принял решение уменьшить картинки и подгружать их через CSS3
@media all and (max-width: 800px) и тут должен идти другой стиль для данного разрешения. Вопрос: как мне в CSS можно в тэг загнуть другую картинку, ту, что поменьше масштабом? (кажется, это адаптивная верстка называется)