[Помогите] Как сделать, чтобы строчность текста и его размер относительно сайта не менялись на разных экранах?

Здравствуйте!

При просмотре сайта на разных экранах (компьютер, телефон, планшет) заголовки плавают (по строкам распределяются по-разному), а также на телефоне некрасиво выглядит огромный заголовок относительно всего сайта, когда при большом разрешении все гармонично?

Ответ нигде не нашел, может, гугл не понял, что я хочу. Буду рад, если поможете, спасибо!

 

Размер шрифтов задается для мобильных устройств в относительной величине em, а не px.

И под мобилку все размеры шрифтов немного переганяются.
Если заголовок был, например, 32px, то на мобильном он должен быть не более 18px.

 

У меня в rem стоит, сейчас исправлю. А как прописать в стили тогда это все (чтобы на мобильном размер заголовка изменить), скажи, пожалуйста? Конкретный пример либо ссылкой поделись на инструкцию)

 

@media screen (min-width: 320px) and (max-width: 480px) {
.container{
/* Стили для мобилки с шириной 320 и высотой 480 + разворот */
}
}

И немного статьи на эту тему http://habrahabr.ru/post/119127/

 

И так тоже пробовал - не получается, зато ставлю на 1/6 меньше (стандартное значение, не медиа), чем было, так сразу размер шрифта уменьшается на мобильных в 3 раза.

--- Добавлено, 25 сен 2015 ---

Еще раз попробовал... Прокатило. Ага, только при условии @media screen and (min-width: 420px) and (max-width: 1600px) Если ставить max-width: 900px - не прокатывает, хотя просматривал с 4 айфона. Не пойму вообще ничего.

 

Ну как бы
Разрешения на телефонах далеко не у всех 480 (по ширине экрана) у последних моделей 1920 уже давно. Поэтому там используется спец подключение класса MobileDetected, который помогает четко передать нужные стили для мобилок.

 

У меня вообще заданный в макете шрифт-"Franklin Gothic Medium" выглядит в верстке совсем иначе и буква "g" должна быть прописью, а у меня не так. Со шрифтами пока не разобралась.