Верстка, CSS, HTML, SVG

Как адаптировать свой сайт под мобильные устройства?

Знаю что это делается с помощью медиа запросов - media-queries,но как именно это сделать? Пример если можно
Эльяс Тойджанов
Эльяс Тойджанов
249
Можно смело брать один из CSS-фреймворков (bootstrap, responsivegridsystem, Sceleton и пр.) и адаптировать существующий дизайн. Либо используйте CSS3 Media Queries.
Например, если использовать фреймворк bootstrap, то вам понадобится, вкратце:
прописать view-port;
подключить файлы фреймворка;
добавить в разметку классы сетки bootstrap.
Или же в таблице стилей выделить через медиа-запросы (CSS3 Media Queries) несколько разрешений и задать оптимальные размеры элементов страницы, например:
@media screen and (max-width: 1280px) { div.contentblock {width: 1200px;} }
@media screen and (max-width: 1140px) { div.contentblock {width: 1024px;} }
@media screen and (max-width: 992px) { div. contentblock {width: 970px;} }
Плюсы данного метода: быстрая реализация для перечисленных типов сайтов.
Минусы: скрипты и стили, которое не используются на мобильной версии, но используются на десктопной, все же будут подгружаться и влиять на время загрузки.
Den Den
Den Den
86 134
Лучший ответ
Эльяс Тойджанов Попытался уже создать такой файл написал всем типо css,вроде подключил также как и файл css,но ничего не изменилось, я смотрел в помощнике, ну там где "посмотреть код" и поменял там на телефоны, но ничего не вышло
Описать в медиа-запросе правила, которые применяются тогда, когда экран ниже определённой ширины (например, скрывать некоторые элементы на странице, которые не очень нужны, или боковую панель менять так, чтобы она отображалась не в столбик, а сверху в виде тонкой строчки).
Куаныш Леписбаев
Куаныш Леписбаев
68 025
Эльяс Тойджанов Нужно в отдельном файле все это прописывать и как его тогда подключить? Попытался уже создать такой файл написал всем типо css,вроде подключил также как и файл css,но ничего не изменилось, я смотрел в помощнике, ну там где "посмотреть код" и поменял там на телефоны, но ничего не вышло
@media screen and min- width 480px;
AR
Amir Ruzukuliev
12 041
Лучше сделать для начала без Бутстрапа. Тогда будете лучше понимать принципы каскадных стилей. Возьмите распространенные контрольные точки: 360, 480, 640, 768, 800 px. Начните с большей и изменяет стили через медиаплееров. Чтобы это все работало на мобильном устройстве, нужно в head прописать viewport.
Евгений Синаев
Евгений Синаев
4 947

Похожие вопросы