it-swarm-ru.tech

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

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

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

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

Каковы преимущества?

13
Moon

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

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

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

7
Matt Eskridge

Сохраните следующий 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>
7
Tobias

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

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

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

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

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

3
Shaz

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

Я пишу свои страницы по размеру экрана, независимо от размера экрана.

3
user2073035

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

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

1
Jonathan Wood

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

1
Dato Janez

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

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

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

PS

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

1
Cool Hand Luke

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

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

0
Abimbola