Как сделать веб-страницу, которая будет соответствовать любому разрешению экрана

Question

Я пытаюсь создать веб-страницу, отформатированную по ширине всего экрана. размеры (или разрешения).

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

Пока что я не нашел помощи по этой теме.

Answer 1

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

Первый - немного сложнее, но дает хорошие стабильные результаты.С другой стороны, (как дизайнер) это немного ограничивает ваше творчество.

Мне кажется, что последний более широко используется.В настоящее время для большинства устройств по всему миру достаточно 3 различных таблиц стилей.Один с разрешением около 900 пикселей будет охватывать несколько более старых экранов, другой с разрешением около 1160 пикселей будет работать с большими и более современными экранами, а другой для мобильных устройств (извините, понятия не имеет приблизительная ширина).

Answer 2

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

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

Answer 3

Если вы зададите этот вопрос, ширина тела будет не только равна 100%, но и ширина его дочерних элементов также должна быть в процентах.