Настройте свой сайт, чтобы соответствовать всем разрешениям

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

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

Настройте свой сайт, чтобы соответствовать всем экранам

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

Определение относительной ширины сайта осуществляется с помощью тегов body . Этот тег можно адаптировать, если вы используете div # body :

 тело {ширина: 100%;} 

В этом примере код диктует, что страница вашего веб-сайта займет 100% окна, независимо от размера экрана просмотра. Если вы хотите, чтобы ваша страница выглядела немного меньше, мы рекомендуем установить ширину не менее 80%, иначе вы рискуете, что ваш контент будет выглядеть слишком маленьким на экране. Если вы определяете меньшую ширину, вы можете сфокусировать экран, используя margin: auto .

Свойство минимальной или максимальной ширины

Свойство минимальной или максимальной ширины также можно использовать при настройке веб-сайта для всех типов разрешения. Однако важно отметить, что минимальная ширина не поддерживается в Internet Explorer и что установка максимальной ширины может привести к искаженному представлению, если страница меньшего размера не умещается на большом экране.

Вот пример веб-сайта, показывающего ширину страницы 90% по центру, с минимальной шириной 600 пикселей и максимальной шириной 2000 пикселей:

 тело {ширина: 90%; рентабельность: авто; мин-ширина: 600px; макс-ширина: 2000px}