Как изменить размер текста по отношению к окну в HTML?

Я делаю веб-страницу в Сайтах Google, и я сталкиваюсь, казалось бы, с общей проблемой. Как уменьшить размер текста при уменьшении окна? Я очень новичок в HTML, поэтому мне нужен простой ответ с некоторым примером кода. Я не уверен, но я думаю, что Сайты Google допускают только HTML. К сожалению, я не могу приложить больше, чем следующий код, который, я надеюсь, достаточно:Как изменить размер текста по отношению к окну в HTML?

<font color="#000000" face="georgia, serif" size="4"><span style="line-height:40px">This is code</span></font>

источник

2016-04-11 The Eye

Вы не достигнете того, что хотите, используя только HTML. Я собирался сказать, что вам нужно будет либо использовать JavaScript, либо CSS Media Queries, но ответ Korgrue будет таким, как мне кажется. –

Использование свойства VW CSS.

Пример:

p {font-size: 4vw;}

только надежно работает на HTML5 совместимых браузеров.

Spec:https://developer.mozilla.org/en-US/docs/Web/CSS/length

1VW = 1/100-ой ширины окна просмотра. Отрегулируйте значение перед vw, чтобы отрегулировать количество автомасштабирования, которое вы хотите в своем типе.

Редактировать: Как уже отмечали другие, вы также можете использовать медиа-запросы, но масштабирование не является гладким и будет переходить к каждому новому размеру шрифта в каждой точке останова. Это отлично подходит для копирования тела, где вы хотите точно контролировать размер шрифта - однако, если вы хотите пропорциональное масштабирование во всех размерах видового экрана, а не только на предопределенных точках останова, используйте VW.

источник

2016-04-11 16:18:13 Korgrue

Ницца. Я в основном разработчик на стороне сервера и не был знаком с VST. Всегда хорошо учиться чему-то новому. –

Вы должны использовать CSS медиазапросы:

@media only screen and (min-width: 768px) { 
    /* tablets and desktop */ 
    font-size: 16pt; 
} 

@media only screen and (max-width: 767px) { 
    /* phones */ 
    font-size: 12pt; 
} 

@media only screen and (max-width: 767px) and (orientation: portrait) { 
    /* portrait phones */ 
    font-size: 18pt; 

}

, если вы не знаете, как добавить CSS файл, который вы можете прочитать в этой ссылке:

Adding Css file

источник

2016-04-11 16:20:26 raven

Два Советы:

1) Использовать относительный размер шрифта em. em устанавливает относительную единицу на основе вычисленного значения размера шрифта родительского элемента. например

`font-size: 2em;`

2) Для более конкретного шрифта добавьте дополнительные медиа-запросы на основе размера экрана.

Я надеюсь, что это поможет

источник

2016-04-11 16:52:12 user1368695

Как изменить размер текста по отношению к окну в HTML?

ответ

Смежные вопросы