Зачем использовать процентное значение для ширины div в CSS?

Я читаю статьи о css. Я узнал, что многие авторы предлагают использовать значение% для ширины или высоты div.

Я использую пиксели все время.

Почему я должен использовать значение% для ширины или высоты div вместо пикселей?

В чем преимущества?

Ответ 1

Мне лично не нравятся сайты, которые имеют% ширины для основной области содержимого из-за несогласованности. Лучше всего использовать ширину пикселя около 1000 пикселей, что может быть немного меньше, для всего веб-сайта, чтобы он работал для всех разрешений.

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

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

Ответ 2

Сохраните следующий html в файл и откройте его в своем веб-браузере. Теперь измените размер окна веб-браузера, обратите внимание, что процент будет расширяться и сокращаться, а пиксели - нет.

<!DOCTYPE html>
<html>
<head>
<title>Pixels and Percents</title>
<style>
html,body {
    margin:0;
    width:100%;
    height:100%;
    background:blue;
}

.pixels {
width:100px;
height:20px;
background:green;
}

.percent {
width:50%;
height:50%;
background:red;
}

</style>
<head>
<body>
<div class="pixels">
PIXELS
</div>
<div class="percent">
PERCENT
</div>
</body>
</html>

Ответ 3

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

Например, скажем, я хочу, чтобы мой элемент div всегда занимал не менее 50% окна браузера зрителей, я мог бы написать это как:

<div style="width:50%">
    This will take up 50% of the width
</div>

Выполнение этого фиксированного способа с помощью "px" потребует, чтобы вы знали разрешение браузера, если хотите получить не менее 50% ширины. Вы можете сделать это с помощью JavaScript, но CSS намного проще и быстрее.

Некоторые другие примеры с использованием таблиц, разделов и анимаций: http://jsfiddle.net/BLQp7/1/

Ответ 4

Я нахожу веб-сайты, которые не соответствуют экрану, либо оставляя пробел (что может быть значительным) вокруг края содержимого, либо падающий сбоку с помощью полосы прокрутки (или, что еще хуже, падающего сбоку без вывода прокрутка!) сильно раздражает.

Я пишу свои страницы, чтобы соответствовать экрану, независимо от того, насколько большой экран.

Ответ 5

Непонятно, какой контекст вы имеете в виду (какой тип элементов). Однако вам нужно быть осторожным при использовании пикселей для размеров шрифтов.

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

Ответ 6

Преимущество использования% заключается в том, что вы можете использовать все 100% пользовательского интерфейса и лучше всего использовать матовый

Ответ 7

Потому что, если процентные потоки, основанные на процентах, упрощают реализацию адаптивного сайта (проще = (меньше (время = деньги))).

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

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

Помните, что в конце концов все сводится к пикселам.

Ответ 8

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

Совет. Используйте пиксели для основного contianer и процентов для контента.