2016-02-08 4 views
3

Я хотел бы установить ширину элемента как отношения собственного разрешения монитора зрителя.Установите ширину элемента, равную размеру монитора БЕЗ изменяющегося при масштабировании

Я понимаю, что CSS «ширина: 100%;» существует, но я не доволен тем, как метод деформирует макет, или может вести себя расстраивающим образом для зрителей, которые хотят увеличить/уменьшить масштаб.

Вместо этого, я бы хотел, чтобы элемент имел вид «ширина: 100%» только при масштабировании = 100%. Возможно ли это (с помощью CSS или Javascript)?

+0

css units 'vw' и' vh' - ширина окна просмотра и высота экрана просмотра, которые остаются относительными при масштабировании. Вы можете использовать их вместо процента. Имейте в виду, что '1vw' составляет 1% ширины окна просмотра пользователей, поэтому установка' 100vw' означает точно так же, как ширина видового экрана пользователей. –

+0

По возможности убедитесь, что ваше приложение может иметь дело с изменением размера окна браузера. Это включает поддержку неожиданных разрешений (например, 3: 4 (по вертикали) или 16: 9 и 16:10) и изменение размера окна просмотра. Если вы больше не сможете корректно отображать приложение, выберите изящную деградацию. Например: добавьте полосы прокрутки, когда что-то слишком сильно сжалось, это выглядит не очень хорошо, но ваше приложение остается пригодным для использования. Используйте мультимедийные запросы и настраиваемый пользовательский интерфейс для поддержки широкого диапазона видовых экранов. – Halcyon

+0

Если бы вы могли опубликовать 2 изображения, показывающие, что вы хотите и что получите, мы были бы в состоянии дать хорошие ответы – LGSon

ответ

0

vw и vh - единицы, которые вам нужно использовать. viewport (монитор пользователя) измеряется с помощью vw и vh. (Ширина и высота окна просмотра окна просмотра соответственно.)

1vw = 1% от ширины Viewport

В.Х. это ведет себя одинаково. 100vh такое же, как 100% высоты просмотра.

100vw и 100vh одинаковы для полной ширины и высоты монитора.

Смежные вопросы