Есть ли автоматизированный способ масштабирования высоты и ширины элементов, определенных в CSS, на основе размеров экрана? В наши дни на рынке существует так много разных размеров экрана, что довольно сложно создать отдельный CSS для каждого. Интересно, можно ли использовать один и тот же CSS с автоматическим масштабированием на основе размера экрана. Скажем, например, исходный CSS построен для размера экрана 1200x800. Если страница открыта на половине этого размера, все элементы css, в которых высота и ширина определены в пикселях, должны автоматически уменьшаться до половины. Я понимаю, что это будет плохо выглядеть, когда страница открывается на очень маленьком экране, потому что все будет выглядеть крошечным. Однако в основном это требование - автоматически настроить экран приложения на экраны ноутбуков, настольных компьютеров и планшетов.Масштабирование параметров CSS на основе размера экрана
Например, у меня есть div и внутри этого div есть 5 кнопок (созданных с использованием CSS). На меньших экранах строка кнопок обертывается на две строки, что делает ее очень плохой. Это просто пример. Большинство других элементов экрана ведут себя аналогичным образом.
У вас есть несколько подходов, доступных, среди них медиа-запросов (млн ссылки, но вот один из них: http://css-tricks.com/logic-in-media-queries/) и еще один, который мне нравится много, единицы просмотра (см. здесь, например: http://css-tricks.com/length-of-css/Процент длины просмотра). Вы в основном описываете то, что называется «Отзывчивый дизайн» (http://en.wikipedia.org/wiki/Responsive_web_design) --- Удачи ^^ – sodawillow
Спасибо! vw и vh звучат интересно. Я изучаю это. Только проблема я вижу на первый взгляд, что более старые версии браузеров не поддерживают их. Основываясь на нашей аналитике Web Master, существует так много людей, которые все еще используют 5-летние версии браузера. –
Может быть, попробуй тогда (просто сделал быстрый поиск отзывчивого дизайна без css 3 на Google :)): http://responsejs.com/ – sodawillow