Я создал сайт с использованием сетки Zurb Foundation 3. У каждой страницы большой h1:
body {
font-size: 100%
}
/* Headers */
h1 {
font-size: 6.2em;
font-weight: 500;
}<div class="row">
<div class="twelve columns text-center">
<h1> LARGE HEADER TAGLINE </h1>
</div>
<!-- End Tagline -->
</div>
<!-- End Row -->font-size не будет реагировать так при изменении размера окна браузера. Вместо этого они реагируют на настройки масштабирования/размера шрифта браузера, например, если вы одновременно нажмете Ctrl и + на клавиатуре в браузере.
Медиа-запросы
Вам нужно было бы рассмотреть возможность использования медиазапросов для уменьшения размера шрифта через определенные промежутки времени, когда он начинает ломать ваш дизайн и создавать полосы прокрутки.
Например, попробуйте добавить это в свой CSS внизу, изменив ширину 320 пикселей, где бы ваш дизайн не ломался:
@media only screen and (max-width: 320px) {
body {
font-size: 2em;
}
}
Длина окна просмотра в процентах
Вы также можете использовать процентную длину области просмотра, например vw, vh, vmin и vmax. Официальный документ W3C для этого гласит:
Длина области просмотра в процентах относится к размеру исходного содержащего блока. Когда высота или ширина исходного содержащего блока изменяется, они соответственно масштабируются.
Опять же, из того же документа W3C каждая отдельная единица может быть определена, как показано ниже:
vw unit - равно 1% ширины исходного содержащего блока.
vh unit - равно 1% высоты исходного содержащего блока.
vmin unit - равно меньшему из vw или vh.
Единица vmax - равно наибольшему из vw или vh.
И они используются точно так же, как и любое другое значение CSS:
.text {
font-size: 3vw;
}
.other-text {
font-size: 5vh;
}
Совместимость относительно хорошая, как видно здесь. Однако некоторые версии Internet Explorer и Edge не поддерживают vmax. Кроме того, в iOS 6 и 7 есть проблема с модулем vh, которая была исправлена в iOS 8.
Вы можете использовать значение области просмотра вместо ems, pxs или pts:
1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger
h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}
Из CSS-хитрости: Размер типографского видового экрана
Я обдумывал способы преодоления этой проблемы и считаю, что нашел решение:
Если вы можете написать свое приложение для Internet Explorer 9 (и более поздних версий) и всех других современных браузеров, которые поддерживают CSS calc(), rem и vmin. Вы можете использовать это для достижения масштабируемого текста без медиазапросов:
body {
font-size: calc(0.75em + 1vmin);
}
Вот оно в действии: http://codepen.io/csuwldcat/pen/qOqVNO
Используйте спецификаторы CSS media (что они используют [zurb]) для отзывчивого стиля:
@media only screen and (max-width: 767px) {
h1 {
font-size: 3em;
}
h2 {
font-size: 2em;
}
}
Если вы не против использования решения jQuery, вы можете попробовать плагин TextFill
jQuery TextFill изменяет размер текста, чтобы он вписывался в контейнер, и делал размер шрифта как можно большим.
Есть несколько способов добиться этого.
Используйте медиа-запрос, но он требует размеров шрифта для нескольких точек останова:
body
{
font-size: 22px;
}
h1
{
font-size: 44px;
}
@media (min-width: 768)
{
body
{
font-size: 17px;
}
h1
{
font-size: 24px;
}
}
Используйте размеры в % или em. Просто измените базовый размер шрифта, и все изменится. В отличие от предыдущего, вы можете просто каждый раз менять основной шрифт, а не h1, или использовать базовый размер шрифта по умолчанию для устройства, а все остальное - в em:
Смотрите kyleschaeffer.com/....
CSS 3 поддерживает новые измерения, относящиеся к порту просмотра. Но это не работает на Android:
3.2vmax = больше 3.2vw или 3.2vh
body
{
font-size: 3.2vw;
}
Смотрите CSS-хитрости..., а также посмотрите Можно ли использовать...
Решение "vw" имеет проблему при переходе на очень маленькие экраны. Вы можете установить базовый размер и подняться оттуда с помощью calc():
font-size: calc(16px + 0.4vw);
Существует другой подход к адаптивным размерам шрифтов - использование блоков 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;
}
}
Чтобы это работало в Internet Explorer 7 и Internet Explorer 8, вам нужно добавить запасной вариант с px-единицами:
h1 {
font-size: 18px;
font-size: 1.125rem;
}
Если вы разрабатываете с Less, вы можете создать миксин, который поможет вам.
Поддержка блоков Rem - http://caniuse.com/#feat=rem
Это частично реализовано в фундаменте 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, чтобы установить размеры шрифта для соответствующих размеров экрана.
Адаптивный размер шрифта также можно сделать с помощью этого кода JavaScript, который называется FlowType:
FlowType - Отзывчивая веб-типография во всей красе: размер шрифта зависит от ширины элемента.
Или этот код JavaScript называется FitText:
FitText - делает размеры шрифта гибкими. Используйте этот плагин в своем адаптивном дизайне для изменения размера заголовков на основе соотношения.
Если вы используете инструмент для сборки, попробуйте Рюкзак.
В противном случае вы можете использовать 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);
}
JQuery "FitText", вероятно, является лучшим решением для адаптивного заголовка. Проверьте это на GitHub:https://github.com/davatron5000/FitText.js
Как и во многих фреймворках, как только вы "сходите с сетки" и переопределяете CSS по умолчанию, все начнет ломаться влево и вправо. Рамки по своей природе являются жесткими. Если бы вы использовали стиль HL по умолчанию для Zurb, а также их классы сетки по умолчанию, веб-страница должна отображаться правильно на мобильном устройстве (т.е. Реагировать).
Однако, похоже, вам нужны очень большие заголовки 6.2em, а это означает, что текст должен сжиматься, чтобы помещаться внутри мобильного дисплея в портретном режиме. Лучше всего использовать гибкий текстовый плагин jQuery, такой как FlowType и FitText. Если вы хотите что-то легкое, тогда вы можете проверить плагин для масштабируемого текстового jQuery:
http://thdoan.github.io/scalable-text/
Использование образца:
<script>
$(document).ready(function() {
$('.row .twelve h1').scaleText();
}
</script>
В реальном оригинале Sass (не scss) вы можете использовать приведенные ниже миксины для автоматической установки абзаца и всех заголовков font-size.
Мне нравится это, потому что это намного более компактно. И быстрее набрать. Помимо этого, он обеспечивает ту же функциональность. В любом случае, если вы все еще хотите придерживаться нового синтаксиса - scss, не стесняйтесь конвертировать мой контент Sass в scss здесь: [Конвертировать SASS в SCSS ЗДЕСЬ]
Ниже я приведу четыре миксина Sass. Вам придется настроить их параметры под свои нужды.
=font-h1p-style-generator-manual() // You dont need to use this one. Those are only styles to make it pretty.
=media-query-base-font-size-change-generator-manual() // This mixin sets the base body size that will be used by the h1-h6 tags to recalculate their size in a 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 placeholder 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
НАСТРОЙТЕ ВСЕ МИКСИНЫ ДЛЯ ВАШИХ ПОТРЕБНОСТЕЙ - ИГРАЙТЕ С НИМ! :) И ТОГДА НАЗЫВАЙТЕ ЭТО НА ТОП ВАШЕГО ФАКТИЧЕСКОГО SASS-КОДА С:
+config-and-run-font-generator()
Это будет генерировать этот вывод. Вы можете настроить параметры для генерации различных наборов результатов. Однако, поскольку мы все используем разные медиа-запросы, некоторые миксины вам придется редактировать вручную (стиль и медиа).
СОЗДАН 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;
}
Я использую эти классы CSS, и они делают мой текст плавным при любом размере экрана:
.h1-fluid {
font-size: calc(1rem + 3vw);
line-height: calc(1.4rem + 4.8vw);
}
.h2-fluid {
font-size: calc(1rem + 2vw);
line-height: calc(1.4rem + 2.4vw);
}
.h3-fluid {
font-size: calc(1rem + 1vw);
line-height: calc(1.4rem + 1.2vw);
}
.p-fluid {
font-size: calc(1rem + 0.5vw);
line-height: calc(1.4rem + 0.6vw);
}
Я только что пришел к мысли, что вам нужно определить размер шрифта только один раз для каждого элемента, но на него все еще влияют медиазапросы.
Сначала я установил переменную "--text-scale-unit" в "1vh" или "1vw", в зависимости от области просмотра с использованием медиазапросов.
Затем я использую переменную используя calc() и мой номер мультипликатора для размера шрифта:
/* Define a variable based on the orientation. */
/* The value can be customized to fit your needs. */
@media (orientation: landscape) {
:root{
--text-scale-unit: 1vh;
}
}
@media (orientation: portrait) {
:root {
--text-scale-unit: 1vw;
}
}
/* Use a variable with calc and multiplication. */
.large {
font-size: calc(var(--text-scale-unit) * 20);
}
.middle {
font-size: calc(var(--text-scale-unit) * 10);
}
.small {
font-size: calc(var(--text-scale-unit) * 5);
}
.extra-small {
font-size: calc(var(--text-scale-unit) * 2);
}<span class="middle">
Responsive
</span>
<span class="large">
text
</span>
<span class="small">
with one
</span>
<span class="extra-small">
font-size tag.
</span>Я видел отличную статью из CSS-хитрости. Работает просто отлично:
body {
font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw -
[minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}
Например:
body {
font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}
Мы можем применить то же уравнение к свойству line-height, чтобы изменить его и в браузере.
body {
font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
}
Вы можете сделать размер шрифта отзывчивым, если определите его в vw (ширина области просмотра). Однако не все браузеры поддерживают его. Решение состоит в том, чтобы использовать JavaScript для изменения базового размера шрифта в зависимости от ширины браузера и установки всех размеров шрифта в%.
Вот статья, описывающая, как сделать адаптивные размеры шрифтов: http://wpsalt.com/responsive-font-size-in-wordpress-theme/
h1 { font-size: 2.25em; }
h2 { font-size: 1.875em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.125em; }
h5 { font-size: 0.875em; }
h6 { font-size: 0.75em; }
Есть следующие способы, которыми вы можете достичь этого:
Эти единицы будут автоматически изменять размер в зависимости от ширины и высоты экрана.
Я нашел это решение, и оно очень хорошо работает для меня:
/* Fluid font size:
minimum font size at min. device width 300px = 14
maximum font size at max. device width 1600px = 26
*/
body {
font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}
Один из способов решить проблему с тем, чтобы текст выглядел хорошо как на настольном компьютере, так и на мобильном устройстве/планшете, заключается в фиксировании размера текста в физических единицах, таких как физические сантиметры или дюймы, которые не зависят от PPI экрана (точек на дюйм).
На основе этого ответа ниже приведен код, который я использую в конце HTML-документа для адаптивного размера шрифта:
<div id='testdiv' style='height: 1in; left: -100%; position: absolute; top: -100%; width: 1in;'></div>
<script type='text/javascript'>
var devicePixelRatio = window.devicePixelRatio || 1;
dpi_x = document.getElementById('testdiv').offsetWidth * devicePixelRatio;
dpi_y = document.getElementById('testdiv').offsetHeight * devicePixelRatio;
function setFontSizeForClass(className, fontSize) {
var elms = document.getElementsByClassName(className);
for(var i=0; i<elms.length; i++) {
elms[i].style.fontSize = String(fontSize * dpi_y / 96) + "px";
}
}
setFontSizeForClass('h1-font-size', 30);
setFontSizeForClass('action-font-size', 20);
setFontSizeForClass('guideline-font-size', 25);
// etc for your different classes
</script>
В приведенном выше коде элементам другого класса назначаются размеры шрифта в физических единицах, если браузер/операционная система правильно настроена для PPI своего экрана.
Шрифт в физических единицах всегда не слишком большой и не слишком маленький, при условии, что расстояние до экрана обычное (расстояние чтения книги).
Размер текста может быть установлен с помощью единицы измерения vw, что означает "ширину области просмотра". Таким образом, размер текста будет соответствовать размеру окна браузера:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_responsive_text
Для моего личного проекта я использовал vw и @meida. Это работает отлично.
.mText {
font-size: 6vw;
}
@media only screen and (max-width: 1024px) {
.mText {
font-size: 10vw;
}
}
.sText {
font-size: 4vw;
}
@media only screen and (max-width: 1024px) {
.sText {
font-size: 7vw;
}
}
Я боюсь, что нет простого решения в отношении изменения размера шрифта. Вы можете изменить размер шрифта с помощью медиа-запроса, но технически он не будет плавно изменяться. Например, если вы используете:
@media only screen and (max-width: 320px){font-size: 3em;}
ваш font-size будет 3em как для ширины 300 пикселей, так и для 200 пикселей. Но вам нужно меньше font-size для ширины 200 пикселей, чтобы сделать идеально отзывчивым.
Итак, каково реальное решение? Есть только один способ. Вы должны создать изображение PNG (с прозрачным фоном), содержащее ваш текст. После этого вы можете легко адаптировать свое изображение (например: ширина: 35%; высота: 28 пикселей). Таким образом, ваш текст будет полностью реагировать на все устройства.
После многих выводов я получил такую комбинацию:
@media only screen and (max-width: 730px) {
h2 {
font-size: 4.3vw;
}
}
Используйте это уравнение:
calc(42px + (60 - 42) * (100vw - 768px) / (1440 - 768));
Для чего-либо большего или меньшего, чем 1440 и 768, вы можете либо присвоить ему статическое значение, либо применить тот же подход.
Недостаток решения vw заключается в том, что вы не можете установить масштабное соотношение, скажем, 5vw при разрешении экрана 1440 может в конечном итоге иметь размер шрифта 60 пикселей, ваш размер шрифта, но при уменьшении ширины окна до 768 он может закончиться 12px, а не тот, который вам нужен.
При таком подходе вы можете установить верхнюю и нижнюю границу, а шрифт будет масштабироваться между ними.
Вот что-то, что сработало для меня. Я тестировал его только на iPhone.
Если у вас есть теги h1, h2 или p, поместите это вокруг вашего текста:
<h1><font size="5">The Text you want to make responsive</font></h1>
Это отображает 22-процентный текст на рабочем столе и все еще читается на iPhone.
<font size="5"></font>