Веб-макеты: пиксели против процентов

Question

Каковы варианты использования для определения расстояний в веб-макете для пикселей и процентов?

Есть ли какой-либо недостаток в использовании пикселей в отношении нескольких разрешений?Будут ли они правильно масштабироваться?

Answer 1

Процентная раскладка

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

При использовании процентных макетов рекомендуется указать min-width и max-width , чтобы он оставался пригодным для использования при очень низких и высоких разрешениях.

1012 * Pros *

1. Весы с размером экрана, поэтому используйте больше места, если оно доступно.

Против

1. Сложнее узнать точное положение чего-либо на экране. В результате это может затруднить создание точных макетов.
2. Может привести к неожиданным макетам, если дочерние элементы имеют фиксированную ширину (то есть изображение) и в конечном итоге будут больше, чем их родительский элемент ширины жидкости.

Пиксельная разметка

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

Плюсы

1. Всегда знать точный размер элемента.
2. Создание точного макета проще.

Против

1. Вы не масштабируете с разрешениями. Ваша компоновка всегда будет одинаковой ширины, создавая пустое пространство, когда люди имеют высокое разрешение.

Answer 2

Я отвечу на это, рассказав вам правдивую историю.

У нас был клиент, которому нужен был вид карты, состоящий из div.

Внезапно он решил, что тоже хочет увеличить.

Мне пришлось изменить все эти мелкозернистые позиции пикселей на проценты.

Применив div для изменения ширины / высоты (в пикселях) относительно, мы получили хороший и разумный эффект масштабирования.

Примечание: На этапе проектирования я быстро разработал прототип, я собираюсь найти его для вас ...

Редактировать: Нет, ничего не найдено, извините.

Answer 3

Будьте осторожны, используя проценты, браузеры webkit неправильно рассчитывают проценты. Это все потому, что webkit не правильно вычисляет подпиксели.

Подробную информацию об этой проблеме можно прочитать здесь: Процент ошибок в webkit

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

Answer 4

Они делают разные вещи.

Значения пикселей всегда относятся к гипотетическим пикселям на устройстве вывода. Значения в процентах относятся к вычисленному размеру содержащего блока (для элементов блока) или к размеру шрифта содержащего блока (для размеров шрифта). Значения em и pt относятся к текущему размеру шрифта.

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

И еще есть IE6; кто бы ни «внедрял» CSS в эту вещь, очевидно, не имел ни малейшего представления о том, что должны делать различные свойства CSS.

Answer 5

Для процентов вы должны иметь базовое значение, так что это будет что-то вроде изображения с размером, заданным вне CSS, если вы просто используете процент в DIV, например, у него не будет ничегонапример, за исключением фактического размера, который был заполнен текстом, поэтому было бы непрактично использовать проценты в качестве способа его измерения, поскольку это редко приводило бы к желаемому результату, если выразмер чего-либо с размером в пикселях, например, с помощью javascript, вы можете изменить размер на процент, который будет изменять исходное значение (в пикселях)