Ответы пользователя по тегу Адаптивный дизайн
  • Как правильно адаптировать шрифты для сайта хотя-бы под 2 языка?

    nikolayshabalin
    @nikolayshabalin
    Автор профессиональных курсов в HTML Academy
    Поспорю с Андреем.
    2) Не храните все символы в одном шрифтовом файле, если у Вас мультиязычный сайт, то есть на сайте есть функционал, который позволяет сменить язык, то храните символы каждого "языка" в отдельных файлах. Это крайне просто.

    Зачем так делать? Опять же повторюсь, если сайт мультиязычный, то нет смысла заставлять английского пользователя скачивать кириллические символы. Уменьшив файл в несколько раз вы ускорите загрузку шрифтовых файлов. Для этого в CSS есть директива unicode-range.

    Например, для подключения кириллицы
    @font-face {
        font-display: swap;
        font-family: 'Lato';
        src: url('/fonts/lato-light/lato-light.cyrillic.woff2') format('woff2'), 
            url('/fonts/lato-light/lato-light.cyrillic.woff') format('woff');
        font-weight: 300;
        font-style: normal;
        unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; // только кириллица
    }


    Как это работает? Браузер анализирует ваш DOM понимает какие символы используются на сайте и если есть совпадение, то шрифт закачивается, то есть в данном примере если на сайте есть кириллица, то lato-light.cyrillic.woff2 скачается и отрисуется, а шрифт lato-light.latin.woff2 даже не закачается.

    Для разделения символов можно использовать инструмент fontmin, либо его gulp аналог
    Ответ написан
    8 комментариев
  • Как позиционировать выпадающий список чтобы он не выходил за установленные приделы?

    nikolayshabalin
    @nikolayshabalin
    Автор профессиональных курсов в HTML Academy
    На css такое делать не желательно.
    Но если ради эксперимента, вы можете через последний пункт меню, поменять позиционирование выпадающего списка.

    У вас наверняка выпадающий список выглядит вот так. Ну т.е. "прицепляется" к пункту меню слева сверху.

    CSS
    .subList {
      ...
      position: absolute;
      top: 0;
      left: 0;
      ...
    }


    Вот вам надо, чтобы у последнего пункта меню выпадабщий список "прицепился" к правой стороне.

    CSS
    .items:last-child {
      .subList {
        right: 0;
      }
    }
    Ответ написан
    2 комментария
  • Как вы делаете адаптивные сайты?

    nikolayshabalin
    @nikolayshabalin
    Автор профессиональных курсов в HTML Academy
    Зачем использовать Susy/Breakpoint, когда можно использовать Susy.
    Почитать
    Ответ написан