Что можно сделать с верской и разрешением?
Есть верстка фикс 1920пикс
говноверстка, туда если залезть, то там и останешься
нужно как то без вмешательств сделать так, что бы до разрешений 1366 хотя бы
макет как бы уменьшался с размерами экрана, то есть
если взять допустим картинку и уменьшать ее, так же и тут (что бы было понятно)
что бы все элементы были на месте
пробовал отключать вьюпорт до 1366пикс, нифига не дает
без вьюпорта вроде на мобиле сайты сжимает так
а как такой эффект можно сделать для пк?
есть какие то идеи?
Дополнительно:
Примерно так https://yandex.ru/search/?text=how+to+scale+site&l...
может быть получится. Но вообще, конечно, идея так себе.
Вот здесь гляньте https://habr.com/ru/articles/686748/
- Спасибо
- В общем сделал проще
как бы вот так)body{ @media screen and (max-width: 1800px) { transform-origin: top left; transform: scale(0.8); width: calc(100% / 0.8); } @media screen and (max-width: 1460px) { transform-origin: top left; transform: scale(0.6); width: calc(100% / 0.6); } }
body{ @media screen and (max-width: 1800px) { transform-origin: top left; transform: scale(0.8); width: calc(100% / 0.8); } @media screen and (max-width: 1460px) { transform-origin: top left; transform: scale(0.6); width: calc(100% / 0.6); } }
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для управления версткой и разрешением на веб-странице существует несколько подходов, которые могут помочь вам создать адаптивный и отзывчивый дизайн.
1. Используйте медиа-запросы: Медиа-запросы позволяют задавать различные стили для разных устройств и разрешений экрана. Например, вы можете определить стили для мобильных устройств, планшетов и настольных компьютеров. Пример использования медиа-запросов в CSS:
@media screen and (max-width: 600px) { /* Стили для мобильных устройств */ } @media screen and (min-width: 601px) and (max-width: 1024px) { /* Стили для планшетов */ } @media screen and (min-width: 1025px) { /* Стили для настольных компьютеров */ }
2. Используйте относительные единицы измерения: Вместо фиксированных значений ширины и высоты элементов используйте относительные единицы измерения, такие как проценты или em. Это позволит вашим элементам адаптироваться к различным разрешениям экрана.
3. Используйте flexbox или grid: Flexbox и grid - это мощные инструменты для создания гибкого макета на веб-странице. Они позволяют легко управлять расположением элементов на странице в зависимости от размера экрана.
4. Тестируйте на различных устройствах: Важно проверять вашу вёрстку на различных устройствах и разрешениях экрана, чтобы убедиться, что она выглядит корректно на всех устройствах.
5. Используйте адаптивные изображения: Для улучшения производительности и оптимизации загрузки страницы используйте адаптивные изображения, которые будут подстраиваться под различные разрешения экрана.
Надеюсь, эти советы помогут вам управлять версткой и разрешением на вашем сайте для создания лучшего пользовательского опыта.