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

20

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

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

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

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

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

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

    
задан MusTheDataGuy 02.09.2011 в 16:36
источник
  • Нет никаких преимуществ ни одному из них, это похоже на то, что мне дают 50% 1 кг или 500 граммов, зависит от вашего приложения –  Jakub 02.09.2011 в 16:47

9 ответов

16

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

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

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

    
ответ дан Graeme Leighfield 02.09.2011 в 16:39
  • У меня нетбук. Фиксированная ширина отвратительна. Большинство веб-сайтов имеют их где-то. Выполнение мобильного дизайна в порядке, и большой, но между ними есть пробел. –  Nicholas Wilson 02.09.2011 в 16:58
  • Наиболее определенно @ Николас Уилсон, однако все сводится к одной вещи, какова цель сайта. Каким должен быть его дизайн, как он должен быть ориентирован. Вещи, которые являются первыми вопросами, которые будут обсуждаться при создании любого веб-сайта. –  Graeme Leighfield 02.09.2011 в 17:02
8

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

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

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

overflow:scroll;

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

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

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

    
ответ дан Glenn Dayton 02.09.2011 в 17:28
  • Я думаю, что% для DIVs подходит и Px для шрифтов, больше контроля. :) –  Ali Gajani 28.05.2014 в 15:25
3

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

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

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

Он имеет четыре простых математических оператора: %код%, %код%, add (+) и %код%.

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

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

Полезное чтение: CSS-трюки

    
ответ дан Andrii Verbytskyi 15.12.2016 в 09:46
2

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

    
ответ дан Yogurt The Wise 02.09.2011 в 16:42
1

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

    
ответ дан Joseph Marikle 02.09.2011 в 16:44
1

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

    
ответ дан Chris 23.07.2015 в 01:23
1

во внутреннем стиле 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>

Здесь верх 30px. так оно и будет.

#outer{
  border-style: dotted;
  position: relative; 
  height: 200px;
}
#inner{
 border-style: double;
  position: absolute;
  top: 30px; <<<<<<<<<<<<
}
<div id="outer">
outer
<div id="inner">
inner
</div>
</div>
    
ответ дан Mahi 15.12.2016 в 09:23
0

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

    
ответ дан Akin Hwan 06.04.2017 в 17:52
-1

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

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

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

ответ дан akwasiijunior 27.10.2016 в 11:07
  • Я сам пометил этот вопрос как не относящийся к теме, потому что я чувствую, что он в основном основан на мнениях, поэтому ответы будут основываться скорее на мнении, чем на жестком факте. Ваш ответ в основном «кто-то другой нравится X, поэтому X должен быть лучше», и на самом деле это не очень большой ответ; это скорее комментарий. –  Mike 27.10.2016 в 14:14