У меня есть сайт, который содержит изображение заголовка, которое я хочу установить на 70% высоты экрана на всех экранах и на оставшемся пространстве. Я хочу напечатать некоторый текст.Медиа-запросы на основе высоты
Должен ли я использовать javascript или использовать медиа-запросы?
Где я могу найти стандартные параметры , для которых мне приходится писать медиа-запросы? Я нашел стандартные разрешения на основе ширинаhere.
Ну, есть vh, который будет работать на вас. 1vh равно 1% просмотра в браузере. Поэтому, если вы установили header{height:70vh;}, он будет использовать 70% того, что может видеть пользователь.
EDIT:
Есть больше относительные длины, чем просто vh. Существует:
vh - По отношению к 1% от высоты окна просмотраvw - по отношению к 1% от ширины окна просмотраvmin - по сравнению с 1% меньшего размера окна просмотраvmax - Относительно 1% от большего размера окна просмотраисточник: https://developer.mozilla.org/en-US/docs/Web/CSS/length
Это хорошая идея. Я удивлен тем, насколько он поддерживает браузер: http://caniuse.com/#feat=viewport-units –
Да, многие браузеры поддерживают его. :) http://caniuse.com/#search=vh – Kyrbi
Сохраните некоторые головные боли и используйте Javascript. Это самый простой и надежный способ установки динамических высот. – jdu
Спасите еще больше головных болей и не беспокойтесь, пытаясь понять, как установить что-то в процентах от высоты окна просмотра. –
Если вы хотите, чтобы он составлял 70% от высоты всех экранов, почему бы просто не использовать css? #header {высота: 70%; } –