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

Question

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

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

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

Спасибо!

Answer 1

Используйте проценты вместе с минимальной шириной и максимальной шириной в пикселях. Это останавливает проценты, делая ваши 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 
} 

Answer 2

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

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

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

Answer 3

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

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

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

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