Верстка блоков.Как расчитывать размеры и отступы?

Question

[nemovalex]

Изучаю верстку, но не разбираюсь в таких вещах как разрешение экранов. Знаю что такое пиксели но не понимаю как их рассчитывать например на странице есть какой то блок и нужно задать определенную ширину расположение отступы ИТД.
Гуглил про пиксели итд но так и не понял Что же нужно знать верстальщику про разрешения экранов и как рассчитывать свойства блочной модели (Margin,Padding)

Comments

[Lord_Dantes]

в макете все есть.

Answer 1

[Andrey Vasilev]

Скачай avocode, загружай psd макет.
при наведении на блок получишь нужные размеры, отступы и остальные стили

Answer 2

[Алексей]

Макеты верстаются как есть (т.е какие размеры в px на макете - те же указываете в стилях). А затем медиазапросами стили правятся под конкретные разрешения, либо диапазон разрешений.

Популярный сейчас mobil-first подход предполагает что исходный макет в разрешении для телефонов, а на последующих брейкпоинтах (в бутстрапе например такие до 576px, 768px, 992px. 1200px и все что больше) размеры и свойства меняются, чтоб макет смотрелся нормально

Comments

[nemovalex]

Спасибо за ответ, изучу то что вы посоветовали. Дело в том то что я изучаю пока без макета, то есть просто создаю блоки и пытаюсь понять логику как это работает но без макета.Правильно ли я делаю? или с самого начала нужно какие то макеты пробовать верстать ?

[Алексей]

nemovalex, Лучше с макетов, так нагляднее. Через хром сразу можно будет проверить на адаптивность при различных разрешениях

[nemovalex]

Алексей, Спасибо!

Answer 3

[Alams Stoyne]

Посмотри останутся вопросы - возвращайся!

Comments

[nemovalex]

Спасибо !

Answer 4

[Алекс Глебов]

Познакомся с сеткой, например бутстрапа, это скелет верстки.
https://youtu.be/3mV-Yw6cm-E

как рассчитывать свойства блочной модели (Margin,Padding)

Ставишь плагин Perfect Pixel в хром
Накладываешь скрин макета сверху и подгоняешь отступы.

Comments

[nemovalex]

Спасибо, попробую