Текущий размер шрифта с минимальным и максимальным свойством [дубликат]

Вы можете сделать это, используя формулу и включая ширину видового экрана.

font-size: calc(7px + .5vw);

Это устанавливает минимальный размер шрифта в 7px и усиливает его на .5vw в зависимости от ширины окна просмотра.

Удачи!

Я получил некоторые гладкие результаты с ними. Он плавно протекает между 3 диапазонами ширины, как непрерывная кусочная функция.

@media screen and (min-width: 581px) and (max-width: 1760px){
    #expandingHeader {
        line-height:5.2vw;
        font-size: 5.99vw;
    }
    #tagLine {
        letter-spacing: .15vw;
        font-size: 1.7vw;
        line-height:1.0vw;
    }
}

@media screen and (min-width: 1761px){
    #expandingHeader {
        line-height:.9em;
        font-size: 7.03em;

    }
    #tagLine {
        letter-spacing: .15vw;
        font-size: 1.7vw;
        line-height:1.0vw;
    }
}

@media screen and (max-width: 580px){
    #expandingHeader {
        line-height:.9em;
        font-size: 2.3em;
    }
    #tagLine {
        letter-spacing: .1em;
        font-size: .65em;
        line-height: .10em;
    }
}

Рюкзак блестящий, но вам необязательно прибегать к инструментам построения, таким как Gulp или Grunt и т. д.

Я сделал демонстрацию с использованием пользовательских свойств CSS (переменные CSS ), чтобы легко управлять размерами минимального и максимального шрифтов.

Так же:

* {
  /* Calculation */
  --diff: calc(var(--max-size) - var(--min-size));
  --responsive: calc((var(--min-size) * 1px) + var(--diff) * ((100vw - 420px) / (1200 - 420))); /* Ranges from 421px to 1199px */
}

h1 {
  --max-size: 50;
  --min-size: 25;
  font-size: var(--responsive);
}

h2 {
  --max-size: 40;
  --min-size: 20;
  font-size: var(--responsive);
}

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

Поэтому, чтобы ответить на вопрос: нет такой вещи, как это свойство CSS. Я не знаю почему, но я думаю, что это потому, что они боятся злоупотребления этим свойством, но я не нахожу никакого случая, когда это может быть серьезной проблемой.

Что бы ни было решения?

Два инструмента позволят нам это сделать: медиа-запросы ans свойство vw

1) Существует «дурацкое» решение, состоящее в создании медиа-запроса для каждого шага, который мы используем в нашем css, изменяя шрифт с фиксированной суммы на другую фиксированную сумму. Он работает, но это очень скучно, и у вас нет гладкого линейного аспекта.

2) Как объяснил почти Pitt, для минимумов есть решение для блеска:

font-size: calc(7px + .5vw);

. Минимум здесь будет 7px в дополнение к 0,5% от ширины вида. Это уже действительно здорово и работает в большинстве случаев. Это не требует каких-либо медийных запросов, вам просто нужно потратить некоторое время на поиск правильных параметров.

Как вы заметили, это линейная функция, основные математики узнают, что две точки уже находят вам параметры. Затем просто исправьте размер шрифта в px, который вы хотите для очень больших экранов и для мобильной версии, а затем вычислите, хотите ли вы сделать научный метод. Думаю, это абсолютно не нужно, и вы можете просто попробовать.

3) Предположим, у вас очень скучный клиент (например, я), который абсолютно хочет, чтобы название было одной строкой и не более. Если вы использовали решение AlmostPitt, у вас проблемы, потому что ваш шрифт будет расти, и если у вас есть контейнер с фиксированной шириной (например, при загрузке в 1140px или в больших окнах). Здесь я предлагаю вам также использовать медиа-запрос. На самом деле вы можете просто найти максимум максимального размера пикселей, который вы можете обрабатывать в своем контейнере, прежде чем этот аспект станет нежелательным (pxMax). Это будет ваш максимум. Тогда вам просто нужно найти точную ширину экрана, которую вы должны остановить (wMax). (Я позволяю вам самостоятельно инвертировать линейную функцию).

После этого просто сделайте

@media (min-width: [wMax]px) {
    h2{
        font-size: [pxMax]px;
    }
}

. Тогда он совершенно линейный и ваш шрифт перестанет расти! Обратите внимание, что вам не нужно помещать свое предыдущее свойство css (calc ...) в медиа-запрос в wMax, потому что медиа-запрос считается более важным и он перезапишет предыдущее свойство.

Не думаю, что полезно сделать для этого фрагмент, так как вам будет трудно сделать его на весь экран, и это не ракета-наука.

Надеюсь, это поможет другим, и не забудьте поблагодарить AlmostPitt за его решение.

Вы можете использовать Sass для управления минимальными и максимальными размерами шрифтов. Вот блестящее решение Эдуардо Букаса.

https://eduardoboucas.com/blog/2015/06/18/viewport-sized-typography-with-minimum-and-maximum-sizes.html

@mixin responsive-font($responsive, $min, $max: false, $fallback: false) {
  $responsive-unitless: $responsive / ($responsive - $responsive + 1);
  $dimension: if(unit($responsive) == 'vh', 'height', 'width');
  $min-breakpoint: $min / $responsive-unitless * 100;

  @media (max-#{$dimension}: #{$min-breakpoint}) {
    font-size: $min;
  }

  @if $max {
    $max-breakpoint: $max / $responsive-unitless * 100;

    @media (min-#{$dimension}: #{$max-breakpoint}) {
      font-size: $max;
    }
  }

  @if $fallback {
    font-size: $fallback;
  }

  font-size: $responsive;
}

.limit-min {
  @include responsive-font(3vw, 20px);
}

.limit-min-max {
  @include responsive-font(3vw, 20px, 50px);
}

Да, в SVG есть некоторые ограничения для некоторых браузеров. Разработчик устанавливает ограничение на 8000 пикселей; Следующая динамически сгенерированная диаграмма не работает, например, в Chrome.

Попробуйте http://www.xn--dddelei-n2a.de/2018/test-von-svt/

<svg id="diagrammChart"
     width="100%"
     height="100%"
     viewBox="-400000 0 1000000 550000"
     font-size="27559"
     overflow="hidden"
     preserveAspectRatio="xMidYMid meet"
>
    <g class="hover-check">
        <text class="hover-toggle" x="-16800" y="36857.506818182" opacity="1" height="24390.997159091" width="953959" font-size="27559">
            <set attributeName="opacity" to="1" begin="ExampShow56TestBarRect1.touchstart"
                 end="ExampShow56TestBarRect1.touchend">
            </set>
            <set attributeName="opacity" to="1" begin="ExampShow56TestBarRect1.mouseover"
                 end="ExampShow56TestBarRect1.mouseout">
            </set>
            Heinz: -16800
        </text>
        <rect class="hover-rect" x="-16800" y="12466.509659091" width="16800" height="24390.997159091" fill="darkred">
            <set attributeName="opacity" to="0.1" begin="ExampShow56TestBarRect1.mouseover"
                 end="ExampShow56TestBarRect1.mouseout">
            </set>
            <set attributeName="opacity" to="0.1" begin="ExampShow56TestBarRect1.touchstart"
                 end="ExampShow56TestBarRect1.touchend">
            </set>
        </rect>
        <rect id="ExampShow56TestBarRect1" x="-384261" y="0" width="953959" height="48781.994318182"
              opacity="0">
        </rect>

    </g>
</svg>

Это действительно предлагается в CSS4

Рабочий черновик в W3C

Цитата:

Эти два свойства позволяют веб-сайту или пользователю требовать, чтобы размер шрифта элемента был зажат в пределах диапазона, поставляемого с этими двумя свойствами. Если размер шрифта вычисленного значения находится за пределами границ, созданных с помощью font-min-size и font-max-size, значение использования font-size зажимается до значений, указанных в этих двух свойствах.

Это будет работать следующим образом:

.element {
    font-min-size: 10px;
    font-max-size: 18px;
    font-size: 5vw; // viewport-relative units are responsive.
}

Это будет означать буквально, размер шрифта будет составлять 5% от ширины видового экрана, но не менее 10 пикселей и никогда не будет больше 18 пикселей.

К сожалению, эта функция еще нигде не реализована (даже на caniuse.com).

Он хорошо работает с CSS.

Я прошел через те же проблемы и исправил это следующим образом.

Используйте фиксированный размер «px» для максимального размера с определенной шириной и выше. Затем для разных меньших ширины используйте относительный «vw» в процентах от экрана.

Ниже приведен результат: он настраивается на экранах ниже 960px, но сохраняет фиксированный размер выше. Просто напоминание, не забывайте добавлять в html-документ в заголовке:

<meta name="viewport" content="width=device-width">

Пример в CSS:

@media all and (min-width: 960px) {
h1{
    font-size: 50px;
  }
}

@media all and (max-width: 959px) and (min-width: 600px) {
h1{
    font-size: 5vw;
  }
}

@media all and (max-width: 599px) and (min-width: 50px) {
h1{
    font-size: 6vw;
  }
}

Надеюсь, это поможет!