Какой предпочтительный блок при выполнении адаптивного дизайна?

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

Я считаю, что процент трудно использовать, так как он сильно усложняет вычисления, и я получил значения, такие как 2.754% и т.д. при настройке ширины/полей и т.д. Пиксели кажутся проще, просто простое сложение и вычитание, но я читал, что это не "будущее доказательство" или что-то в этом роде, и обычно не масштабируется, если пользователь увеличивает масштаб изображения в окне браузера. Это правда?

Если у вас есть опыт или опыт, пожалуйста, поделитесь! Я хотел бы услышать, что вы, ребята, должны сказать!

Ответы

Ответ 1

Для макета введите такие значения, как размеры ящиков, вы хотите использовать %, потому что у вас обычно будет несколько столбцов размером в процентах от их родителя, которые будут складываться друг на друга по определенную точку останова (width:100%). Никакая другая единица не позволит вам заполнить 100% пространства, например %.

Для отступов/полей используйте em, обычно вам нужно будет выровнять элементы по сравнению с размером вашего текста. С em (с символом "M" ) вы можете легко сказать, что мне требуется примерно 1 символьный интервал.

Для границ вы можете использовать px или em, однако есть разница. Если вы хотите, чтобы ваша граница выглядела как одна пиксельная широкая на всех устройствах, используйте 1px. Это может быть не один пиксель на всех устройствах, однако дисплеи с высокой плотностью преобразуют 1px в 2px, например. Если вы хотите, чтобы ваша граница была размером на основе вашего шрифта, используйте em.

Для шрифтов используйте em (или %), использование em переносит родителей на детей, и это просто более удобный блок для работы с более чем px.

Ответ 2

Конечно, вы должны использовать процент. Но с клавишами min-height, max-height, min-width, max-width CSS.

Для следующего поколения

vw и vh. Vw - 1/100-й ширины окна, а vh - 1/100-й высоты окна. Для реагирования они станут новыми подразделениями.

Ответ 3

Используйте проценты вместе с минимальной шириной и максимальной шириной в пикселях. Это останавливает проценты, делая ваши divs слишком маленькими или слишком большими. например,

div {
    width:100%; //full width of browser
    max-width: 960px; //this means it will be 100% of the browser until 960px then it will stop expanding
}