Веб-сайт с переменной шириной

Question

Я пытаюсь создать сайт с переменной шириной, но у меня проблема с изображениями. Я хочу, чтобы сайт имел большие изображения и шрифты на более широких мониторах и меньше для обычных. Решением, о котором я думал, было использование процентов, но изображения (для кнопок, фона и заголовка) выглядят плохо, когда их размер изменяется. Есть ли другое решение для изменения размера изображений и контента в зависимости от ширины браузера?

Спасибо

Answer 1

Первое, что нужно сделать, это проверить, действительно ли вам нужны эти изображения. Я их не видел, так что полагаю, они вам очень нужны.

Но на самом деле вам не нужен какой-либо JavaScript для этого.

В зависимости от целевой аудитории и времени, которое у вас есть на создание веб-сайта, вы можете попробовать использовать медиазапросы CSS для определения ширины дисплея пользователя. (Вы можете узнать больше здесь: http://www.alistapart.com/articles/responsive-web-design/) Вы можете проверить целевое разрешение экрана с помощью простых условных операторов CSS. Если вы знаете, какие типы дисплеев наиболее популярны среди ваших потенциальных гостей, вы можете подготовить 3-4 набора изображений разного размера для разных пользователей.

Таким образом, вы можете доставлять изображения разных размеров с разным разрешением пользователя.

Но сначала сделайте 100% нужных вам изображений, и вы сможете добиться того же эффекта с помощью CSS.

Answer 2

Возможно, вам нужна смесь JavaScript и CSS; используйте JavaScript, чтобы определить размер экрана, и используйте его, чтобы рассчитать коэффициент для изменения размера и изменить свойство CSS объектов.

Вы также можете использовать размеры в em вместо пикселей при создании таблиц стилей.

При изменении размера изображений также необходимо учитывать соотношение сторон, поэтому нельзя просто применить процентное значение как к ширине, так и к высоте.