CSS - проценты или пиксели?

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

Я бы сделал что-то вроде этого:

body{
    height: 99%;
    width: 99%;
    margin-top: 10px;
}

но я часто вижу такие примеры:

body{
    height: 300px;
    width: 250px;
    margin-top: 10px;
}

Мой вопрос заключается в следующем: есть ли какая-либо польза от использования одного над другим общим, и если да, то каковы они?

Спасибо.

Мик

Ответ 1

Мобильные веб-страницы. % рок для этого. Как это будет (очевидно) приспосабливаться.

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

Оба имеют много плюсов и минусов друг над другом:)

Ответ 2

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

<link rel="stylesheet" href="/styles/mobile.css" media="handheld" />

Я нахожу разработку веб-сайтов в процентах очень интенсивным, учитывая все события перераспределения, такие как:

overflow:scroll;

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

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

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

Ответ 3

Используйте оба= D

С вами всегда можно комбинировать, используя оба, если вы смущены об этом)

calc() - это собственный способ CSS для простой математики прямо в CSS в качестве замены любого значения длины (или почти любого значения числа).

Он имеет четыре простых математических оператора: add (+) subtract (-) multiply (*) и divide (/).

.my-class {
    widht: calc(100% - 20px);
    height: calc(50% + 10px);
}

Поддержка браузера на удивление хороша. Могу ли я использовать...

Полезное чтение: CSS-Tricks

Ответ 4

Если вы хотите, чтобы объекты были того же размера, что бы ни было, то пиксели (не подверженные масштабированию или размеру экрана). Также можно изучить использование EM. Я думаю, что EM - это нечто среднее, где они подвержены масштабированию, но не по размеру экрана.

Ответ 5

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

Ответ 6

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

Ответ 7

во внутреннем стиле top свойство находится в %, поэтому оно будет считаться 200px*0.3=60px

#outer{
  border-style: dotted;
  position: relative; 
  height: 200px;
}
#inner{
 border-style: double;
  position: absolute;
  top: 30%; <<<<<<<<<<<<<<
}

<div id="outer">
outer
<div id="inner">
inner
</div>
</div>

Ответ 8

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

Ответ 9

Очевидно, что нет ничего правильного или неправильного. Это скорее вопрос текучести.

Легче позиционировать объекты относительно друг друга с помощью пикселей и контролировать точную высоту и ширину.

Масштабирование объектов проще с процентами. 50% ширины окна всегда будет половиной окна независимо от размера экрана.