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

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем Gafe62, 25 сен 2015.

  1. Gafe62

    Gafe62

    Регистрация:
    11 окт 2013
    Сообщения:
    252
    Симпатии:
    30
    Здравствуйте!

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

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

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.120
    Симпатии:
    560
    Размер шрифтов задается для мобильных устройств в относительной величине em, а не px.

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

    Gafe62

    Регистрация:
    11 окт 2013
    Сообщения:
    252
    Симпатии:
    30
    У меня в rem стоит, сейчас исправлю. А как прописать в стили тогда это все (чтобы на мобильном размер заголовка изменить), скажи, пожалуйста? Конкретный пример либо ссылкой поделись на инструкцию)
     
  4. alex_storm

    alex_storm дизайн, CSS Команда форума

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

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

    Gafe62

    Регистрация:
    11 окт 2013
    Сообщения:
    252
    Симпатии:
    30
    И так тоже пробовал - не получается, зато ставлю на 1/6 меньше (стандартное значение, не медиа), чем было, так сразу размер шрифта уменьшается на мобильных в 3 раза.
    --- Добавлено, 25 сен 2015 ---
    Еще раз попробовал... Прокатило. Ага, только при условии @media screen and (min-width: 420px) and (max-width: 1600px) Если ставить max-width: 900px - не прокатывает, хотя просматривал с 4 айфона. Не пойму вообще ничего.
     
    Последнее редактирование: 25 сен 2015
  6. alex_storm

    alex_storm дизайн, CSS Команда форума

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

    Hvasta

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