Размер шрифта

[GaDiV]

В процессе резиновой вёрстки возник вопрос:

Возможно ли,что бы при увеличении разрешения экрана увеличивался и текст? Если да, то каким образом это осуществить?

[psywalker]

В процессе резиновой вёрстки возник вопрос:

Возможно ли,что бы при увеличении разрешения экрана увеличивался и текст? Если да, то каким образом это осуществить?

JS

[GaDiV]

JS

А используя css не выйдет?

[SelenIT]

Только если ступенчато...

@media screen and (max-width: 700px) {
   body { font-size: 0.625em; }
}
@media screen and (min-width: 701px) and (max-width: 1000px) {
   body { font-size: 0.75em; }
}
@media screen and (min-width: 1001px) and (max-width: 1250px) {
   body { font-size: 1em; }
}
@media screen and (min-width: 1251px) {
   body { font-size: 1.25em; }
}

Но в IE8 и ниже всё равно без скрипта (хотя бы в виде экспрешна) никак.

[GaDiV]

Только если ступенчато...

@media screen and (max-width: 700px) {
   body { font-size: 0.625em; }
}
@media screen and (min-width: 701px) and (max-width: 1000px) {
   body { font-size: 0.75em; }
}
@media screen and (min-width: 1001px) and (max-width: 1250px) {
   body { font-size: 1em; }
}
@media screen and (min-width: 1251px) {
   body { font-size: 1.25em; }
}

Но в IE8 и ниже всё равно без скрипта (хотя бы в виде экспрешна) никак.

ага ясно, но в этом случае шрифт будет на всём сайте одного размера, или я не прав?

Я ещё новичок, так что заранее сории если тупой вопрос, но размер заданный тобою эквивалентен какому размеру шрифта?16?

[psywalker]

Только если ступенчато...

@media screen and (max-width: 700px) {
   body { font-size: 0.625em; }
}
@media screen and (min-width: 701px) and (max-width: 1000px) {
   body { font-size: 0.75em; }
}
@media screen and (min-width: 1001px) and (max-width: 1250px) {
   body { font-size: 1em; }
}
@media screen and (min-width: 1251px) {
   body { font-size: 1.25em; }
}

Но в IE8 и ниже всё равно без скрипта (хотя бы в виде экспрешна) никак.

Дружище, а расскажи про эти чудеса поподробнее плиз

[SelenIT]

но в этом случае шрифт будет на всём сайте одного размера, или я не прав?

Я ещё новичок, так что заранее сории если тупой вопрос, но размер заданный тобою эквивалентен какому размеру шрифта?16?

Это просто пример, так можно задать базовый размер шрифта для всего сайта или для какой-то его части (подставив вместо body). 1em по умолчанию равен 16px, в моем примере размер меняется по ступеням 10, 12, 16 и 20px, но это просто для примера.

расскажи про эти чудеса поподробнее плиз

Вот нашлась неплохая статья с примерами про это безобразие.

[psywalker]

Вот нашлась неплохая статья с примерами про это безобразие.

Спасибо дружище, а выходит что для ИЕ6-8 такую штуку не применить?

[GaDiV]

Это просто пример, так можно задать базовый размер шрифта для всего сайта или для какой-то его части (подставив вместо body). 1em по умолчанию равен 16px, в моем примере размер меняется по ступеням 10, 12, 16 и 20px, но это просто для примера.

Вот нашлась неплохая статья с примерами про это безобразие.

Всё кажись понял, что ты имел ввиду, ты для определённых разрешений задал определённый размер шрифта и при увеличении разрешения срабатывает тот шрифт, к какому разрешению он привязан, я правильно понял?

[SelenIT]

для ИЕ6-8 такую штуку не применить?

Увы, нет.

ты для определённых разрешений задал определённый размер шрифта и при увеличении разрешения срабатывает тот шрифт, к какому разрешению он привязан, я правильно понял?

Да.

[psywalker]

Увы, нет.

А ты что то говорил про экспрешанны вроде? Не мог бы привести пару примеров плиз?

[SelenIT]

body { font-size: expression(document.body.offsetWidth < 700 ? '.625em' : (document.body.offsetWidth < 1000 ? '.75em' : (document.body.offsetWidth < 1250 ? '1em' : '1.25em'))); }

Вот такое, кажется, работает в режиме IE7. В IE8, чтоб ему, даже экспрешны не работают, остается только обычный скрипт.

<!--[if lte IE 8]><script>
onload = onresize = function() {
	document.body.style.fontSize = document.documentElement.clientWidth < 700
		? '.625em'
		: document.documentElement.clientWidth < 1000 
			? '.75em'
			: document.documentElement.clientWidth < 1250 ? '1em' : '1.25em';
}
</script><![endif]-->

[psywalker]

body { font-size: expression(document.body.offsetWidth < 700 ? '.625em' : (document.body.offsetWidth < 1000 ? '.75em' : (document.body.offsetWidth < 1250 ? '1em' : '1.25em'))); }

Вот такое, кажется, работает в режиме IE7. В IE8, чтоб ему, даже экспрешны не работают, остается только обычный скрипт.

<!--[if lte IE 8]><script>
onload = onresize = function() {
	document.body.style.fontSize = document.documentElement.clientWidth < 700
		? '.625em'
		: document.documentElement.clientWidth < 1000 
			? '.75em'
			: document.documentElement.clientWidth < 1250 ? '1em' : '1.25em';
}
</script><![endif]-->

Спасибо тебе дружище. Как всегда - полезная инфа