Rodion Svetlitskiy

https://learn.javascript.ru/first-steps

Лучший способ, понять как верстать правильно, это посмотреть исходники общепризнанных решений, от опытных специалистов. Советую вам изучить код нескольких css-фреймворков, например Foundation и Bootstrap. Css код первого, на мой взгляд, практически эталон.

В head добавьте:

<meta name="viewport" content="width=device-width, initial-scale=1  maximum-scale=1">

Используйте Typekit или Google Fonts, если конечно там будет необходимый вам шрифт.

Вот так попробуйте codepen.io/Rodion77/pen/XbgPEE?editors=110

В чем проблема то? Скорее всего ваш клиент сайт наполнять будет из админки. И скорее всего у вас там реализован wysiwyg редактор, в любом из них клиент сможет задавать обтекание нужному ему изображению.
Если у вас сайт статичный, то клиент в любом случае должен владеть минимальными навыками работы с html, тогда просто вешайте на картинки классы. Со второй частью вопроса примерно та же ситуация.
Но лично я не очень понимаю почему там должны быть разные отступы у абзацев.

Добавить line-height.
Например так: codepen.io/Rodion77/pen/VLWPYz?editors=110

Используйте px и em, они прекрасно справляются со своей задачей в адаптивной верстке. В определенном диапазоне разрешений увеличивайте шрифт до нужного размера, использовать "относительный" em в этом смысле удобнее нежели "абсолютный" px. Насчет vw/vh они также прекрасно работают (IE, начиная с 9й версии и анероид с версии 4.4), но причин их использовать лично я для себя не нашел.

• Забыть о фиксированных величинах, то есть про px и использовать % по максимуму.
  
• Использовать svg вместо png, или увеличивать размер png
  
• Применяя media queries определять экраны с высокой плотностью пикселей и заменять изображения на увеличенные в 2 раза. Можно для этих целей применить javaScript, можно заюзать retina.js
  

@media screen and (max-width: 480px) {
font-size: 14 px;
}

Задайте для body height: 100% и для своего блока соответственно height:100%