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% ширины окна всегда будет половиной окна независимо от размера экрана.