@eternal_blue

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

В общем, мой скажем друг участвует в школьном конкурсе по созданию сайтов. В другом городе. Случайно туда попав и ничего не понимая в этом, он попросил меня помощи. Я как многомудрый опытный верстальщик, пошел сюда искать просвещения. Так вот, как вы можете посоветовать верстать сайт под неизвестный размер монитора? Вы знаете российские школы, там могут быть квадратные мониторы 800 на 600, а могут быть и нормальные современные моники. Было пару убойных попыток сверстать что нибудь эдакое универсальное, через вычисление скриптом размеров рабочей области браузера, и передачи значения в соответствующий стиль в css, но видно не судьба, со шрифтами так и ничего не понял. Пробовал делать все с процентами, тоже какой то бред выходил. Тестировал все просто меняя расширение экрана на винде и смотря на результат плакал. Есть какой нибудь красивый выход, которого я в упор не вижу?
  • Вопрос задан
  • 681 просмотр
Решения вопроса 3
alex_shevch
@alex_shevch
PM, Frontend Developer
Я как многомудрый опытный сварщик, пришёл спросить какой стороной держать паяльник.

"через вычисление скриптом размеров рабочей области" - что?
Просто задаёте максимальную ширину контейнера, саму ширину в 100%, центруете, задаёте небольшой padding - вот вам контейнер под любой размер монитора.

Если совсем не понимаете, попробуйте использовать заготовку от какого-нибудь бутстрапа.

Успехов!
Ответ написан
l3ftoverz
@l3ftoverz Куратор тега HTML
Dance Gavin Dance - Inspire The Liars
Попробуй верстать от меньшего, к большему (mobile first), экраны 800х600 как раз можно к мобильным отнести.
Верстай используя современные методы раскладки (Flex, Grid) - их проще адаптировать, всё, что тебе нужно - описать брекпоинты разрешений экранов и через медиа запросы описать для каждого стили, которые не ломаются при переходе от одного брекпоинта к другому.
Ответ написан
https://css-tricks.com/the-difference-between-resp...
Только по хорошему нужно миксовать отзывчивый и адаптивный дизайн
Познакомься с относительными величинами для css (%, vh, vw, em, rem)
Используй svg графику там где возможно вместо png
https://developer.mozilla.org/ru/docs/Learn/HTML/M...
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
OtshelnikFm
@OtshelnikFm
Мои работы: otshelnik-fm.ru
Почитай про адаптивную вёрстку. И голову людям не забивай.
Видать карантин в школе затянулся
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы