Текст поверх изображения: изменение размера шрифта динамически при изменении размера браузера [дубликат]

Используйте спецификаторы CSS media (это то, что они используют [zurb]) для отзывчивого стиля:

@media only screen and (max-width: 767px) {

   h1 {
      font-size: 3em;
   }

   h2 {
      font-size: 2em;
   }

}

В фактическом оригинальном sass not scss вы можете использовать ниже mixins для автоматического установки абзаца и всех шрифтов заголовков.

Мне нравится, потому что он намного компактнее. И быстрее набирать. Помимо этого, он обеспечивает такую ​​же функциональность. В любом случае, если вы все еще хотите придерживаться нового синтаксиса - scss, тогда не стесняйтесь конвертировать мой sass в scss здесь: [CONVERT SASS TO SCSS HERE]

Ниже я даю вам четыре сасса Примеси.

=font-h1p-style-generator-manual() // you dont need use this one those are only styles to make it pretty
=media-query-base-font-size-change-generator-manual() // this mixin sets base body size that will be used by h1-h6 tags to recalculate their size in media query
=h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6) // here you will set the size of h1 and size jumps between h tags
=config-and-run-font-generator() // this one only calls the other ones

После того, как вы закончите играть с настройками, просто сделайте вызов на одном микшировании - это: + config-and-run-font-generator () , См. Код ниже и комментарии для получения дополнительной информации.

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

КОПИРОВАТЬ И Вставить эти миксы в ваш файл

=font-h1p-style-generator-manual()
  body
    font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif // google fonts
    font-size: 100%
    line-height: 1.3em
  %headers
    line-height: 1em
    font-weight: 700
  p
    line-height: 1.3em
    font-weight: 300
  @for $i from 1 through 6
    h#{$i}
      @extend %headers


=media-query-base-font-size-change-generator-manual()
  body
    font-size: 1.2em
  @media screen and (min-width: 680px)
    body
      font-size: 1.4em
  @media screen and (min-width: 1224px)
    body
      font-size: 1.6em
  @media screen and (min-width: 1400px)
    body
      font-size: 1.8em

=h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6)
  $h1-fs: $h1-fs // set first header element to this size
  $h1-step-down: $h1-step-down // decrement each time by 0.3
  $p-same-as-hx: $p-same-as-hx // set p font-sieze same as h(6)
  $h1-fs: $h1-fs + $h1-step-down // looping correction
  @for $i from 1 through 6
    h#{$i}
      font-size: $h1-fs - ($h1-step-down * $i)
    @if $i == $p-same-as-hx
      p
        font-size: $h1-fs - ($h1-step-down * $i)

// RUN ONLY THIS MIXIN IT WILL TRIGGER THE REST
=config-and-run-font-generator()
  +font-h1p-style-generator-manual() // just a place holder for our font style
  +media-query-base-font-size-change-generator-manual() // just a place holder for our media query font size
  +h1p-font-size-generator-auto($h1-fs: 2em, $h1-step-down: 0.2, $p-same-as-hx: 5) // set all parameters here

КОНФИГУРАЦИЯ ВСЕХ СМЕШИВАНИЙ К ВАШИМ ПОТРЕБНОСТЯМ - ИГРАЙТЕ С ЭТОЙ! :) И ТОГДА ВЫЗЫВАЙТЕ ЭТО НА ВЕРСИИ ВАШЕГО АКТУАЛЬНОГО САСОВОГО КОДА С:

+config-and-run-font-generator()

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

GENERATED CSS:

body {
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 100%;
  line-height: 1.3em;
  word-wrap: break-word; }

h1, h2, h3, h4, h5, h6 {
  line-height: 1em;
  font-weight: 700; }

p {
  line-height: 1.3em;
  font-weight: 300; }

body {
  font-size: 1.2em; }

@media screen and (min-width: 680px) {
  body {
    font-size: 1.4em; } }
@media screen and (min-width: 1224px) {
  body {
    font-size: 1.6em; } }
@media screen and (min-width: 1400px) {
  body {
    font-size: 1.8em; } }
h1 {
  font-size: 2em; }

h2 {
  font-size: 1.8em; }

h3 {
  font-size: 1.6em; }

h4 {
  font-size: 1.4em; }

h5 {
  font-size: 1.2em; }

p {
  font-size: 1.2em; }

h6 {
  font-size: 1em; 

}

Существует несколько способов достижения этого

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

body
{
       font-size: 22px; 
}
h1
{
       font-size:44px;
}

@media (min-width: 768)
{
       body
       {
           font-size: 17px; 
       }
       h1
       {
           font-size:24px;
       }
}

Использовать измерения в% или em. Просто измените размер базового шрифта, все изменится. В отличие от предыдущего, вы можете просто изменить шрифт тела, а не h1 каждый раз, или позволить размер базового шрифта по умолчанию устройства и оставить все в em

1. «Ems» (em): «em» является масштабируемой единицей. Значение em равно текущему размеру шрифта, например, если размер шрифта документа равен 12pt, 1em равен 12pt. Ems являются масштабируемыми по своей природе, поэтому 2em будет равен 24pt, .5em будет равен 6pt и т. Д.
2. Percent (%): единица процента похожа на блок «em», за исключением нескольких основных различия. Прежде всего, текущий размер шрифта равен 100% (т. Е. 12pt = 100%). При использовании процентной единицы ваш текст остается полностью масштабируемым для мобильных устройств и для доступности.

см. kyleschaeffer.com /....

CSS3 поддерживает новые измерения, которые относятся к виду порта. Но это не работает в android

1. 3.2vw = 3,2% от ширины окна просмотра
2. 3.2vh = 3.2% высоты окна просмотра
3. 3.2vmin = Меньше 3.2vw или 3.2vh
4. 3.2vmax = Больше 3.2vw или 3.2vh

   body
   {
       font-size: 3.2vw;
   }
   

см. css-tricks.com /...., а также посмотреть caniuse.com /....

Я обсуждал способы преодоления этой проблемы и считаю, что нашел решение:

Если вы можете написать свое приложение для IE9 + и всех других современных браузеров, поддерживающих CSS calc () , rem единиц и единиц vmin, вы можете использовать это для достижения масштабируемого текста без запросов к медиа:

body {
  font-size: calc(0.75em + 1vmin);
}

Вот он в действии: http://codepen.io/csuwldcat/pen / qOqVNO

Если вы используете инструмент построения, тогда попробуйте Rucksack.

В противном случае вы можете использовать переменные CSS (пользовательские свойства), чтобы легко управлять размерами минимального и максимального шрифтов, например ( demo ):

* {
  /* 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);
}

Вы можете изменить размер шрифта, если определить его в vw (ширина видового экрана). Однако не все браузер поддерживает его. Решение заключается в использовании JS для изменения размера базового шрифта в зависимости от ширины браузера и установки всех размеров шрифтов в%. Вот статья, описывающая, как создавать гибкие шрифты: http://wpsalt.com/responsive-font-size-in-wordpress-theme/

Если вы не против использовать решение jQuery, вы можете попробовать плагин TextFill

jQuery TextFill изменяет размер текста, чтобы он вписывался в контейнер и делал размер шрифта как можно большим.

https://github.com/jquery-textfill/jquery-textfill

jQuery «FitText» - это, вероятно, лучшее отзывчивое решение заголовка. Проверьте это в Github: https://github.com/davatron5000/FitText.js

Я боюсь, что нет простого решения относительно изменения размера шрифта. Вы можете изменить размер шрифта, используя медиа-запрос, но технически он не будет изменяться без изменений. Например, если вы используете:

@media only screen and (max-width: 320px){font-size: 3em;}

Размер шрифта будет 3em как для ширины 300px, так и 200px. Но вам нужен более низкий размер шрифта для ширины 200 пикселей, чтобы обеспечить отличную реакцию.

Итак, каково реальное решение? Есть только один способ. Вы должны создать изображение png (с прозрачным фоном), содержащее ваш текст. После этого вы можете легко реагировать на изображение (например: ширина: 35%, высота: 28 пикселей). Таким образом, ваш текст будет полностью отвечать всем устройствам.

Отзывчивый размер шрифта также может быть выполнен с помощью этого javascript, называемого FlowType:

• http://simplefocus.com/flowtype/
• https://github.com/simplefocus/FlowType.JS

FlowType - адаптивная веб-типография на самом лучшем уровне: размер шрифта на основе ширины элемента.

Или этот javascript называется FitText:

• http://fittextjs.com/
• https: // github.com/davatron5000/FitText.js

FitText - размер шрифтов гибкий. Используйте этот плагин для вашего адаптивного дизайна для изменения размера ваших заголовков.

Существуют следующие способы достижения этого:

1. Использовать rem для, например, 2.3 rem
2. Используйте em для, например. 2.3em
3. Использовать%, например. 2.3% Кроме того, вы можете использовать: vh, vw, vmax и vmin.

Эти устройства будут автоматизировать в зависимости от ширины и высоты экрана.

Вы можете использовать значение viewport вместо ems, pxs или pts.

1vw = 1% ширины окна просмотра

1vh = 1% высоты просмотра (/ g3) ]

1vmin = 1vw или 1vh, в зависимости от того, что меньше

1vmax = 1vw или 1vh, в зависимости от того, что больше

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

из Css-трюков: http://css-tricks.com/viewport-sized-typography/

Это частично реализовано в фундаменте 5.

в _type.scss у них есть два набора переменных заголовка

// We use these to control header font sizes
//for medium screens and above

$h1-font-size: rem-calc(44) !default;
$h2-font-size: rem-calc(37) !default;
$h3-font-size: rem-calc(27) !default;
$h4-font-size: rem-calc(23) !default;
$h5-font-size: rem-calc(18) !default;
$h6-font-size: 1rem !default;


// We use these to control header size reduction on small screens
$h1-font-reduction: rem-calc(10) !default;
$h2-font-reduction: rem-calc(10) !default;
$h3-font-reduction: rem-calc(5) !default;
$h4-font-reduction: rem-calc(5) !default;
$h5-font-reduction: 0 !default;
$h6-font-reduction: 0 !default;

. Для средних значений они генерируют размеры на основе первого набора из переменных.

@media #{$medium-up} {
      h1,h2,h3,h4,h5,h6 { line-height: $header-line-height; }
      h1 { font-size: $h1-font-size; }
      h2 { font-size: $h2-font-size; }
      h3 { font-size: $h3-font-size; }
      h4 { font-size: $h4-font-size; }
      h5 { font-size: $h5-font-size; }
      h6 { font-size: $h6-font-size; }
    }

И для маленьких по умолчанию экранов они используют второй набор переменных для генерации css.

h1 { font-size: $h1-font-size - $h1-font-reduction; }
h2 { font-size: $h2-font-size - $h2-font-reduction; }
h3 { font-size: $h3-font-size - $h3-font-reduction; }
h4 { font-size: $h4-font-size - $h4-font-reduction; }
h5 { font-size: $h5-font-size - $h5-font-reduction; }
h6 { font-size: $h6-font-size - $h6-font-reduction; }

вы можете использовать эти переменные и переопределить в своем обычном scss-файл для установки размеров шрифта для соответствующих размеров экрана

"vw" имеет проблемы при переходе на очень маленькие экраны. Вы можете установить размер базы и перейти оттуда с помощью calc ():

font-size: calc(16px + 0.4vw);

Как и во многих фреймворках, как только вы «сходите с сетки» и переопределяете CSS по умолчанию, все начнет ломаться влево и вправо. Рамки по своей природе являются жесткими. Если бы вы использовали стиль H1 по умолчанию для Zurb и их классы сетки по умолчанию, веб-страница должна отображаться правильно на мобильных устройствах (т. Е. Реагировать).

Однако, похоже, вам нужны очень большие заголовки 6.2em, что означает, что текст будет уменьшаться, чтобы помещаться внутри мобильного дисплея в портретном режиме. Лучше всего использовать гибкий текстовый плагин jQuery, такой как FlowType и FitText . Если вы хотите что-то легкое, тогда вы можете проверить мой плагин jQuery для масштабируемого текста:

http://thdoan.github.io/scalable-text/

Использование образца:

<script>
$(document).ready(function() {
  $('.row .twelve h1').scaleText();
}
</script>

Существует другой подход к гибким размерам шрифтов - с использованием модулей rem.

html {
    /* base font size */
    font-size: 16px;
}

h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }

Позже в запросах мультимедиа вы можете отрегулировать все размеры шрифтов, изменив размер базового шрифта:

@media screen and (max-width: 767px) {
  html {
    /* reducing base font size will reduce all rem sizes */
    font-size: 13px;
  }

    /* you can reduce font sizes manually as well*/
    h1 { font-size: 1.2rem; }
    h2 { font-size: 1.0rem; }

}

Чтобы выполнить эту работу в IE7-8, вам придется добавить резервную копию с единицами px:

h1 {
    font-size: 18px;
    font-size: 1.125rem;
} 

Если вы разрабатываете с помощью LESS, вы можете создать mixin, который будет выполнять математику для вы.

Поддержка модулей Rem - http://caniuse.com/#feat=rem