Размер шрифта в зависимости от разрешения экрана

D
На сайте с 09.10.2011
Offline
15
22484

Доброго времени суток! Нужна помощь. Нужно сделать чтобы на сайте менялся размер шрифта в зависимости от разрешения экрана. Если разрешение большое то шрифт больше, если маленькое то и шрифт соответственно тоже маленький. Подскажите как такое реализовать. Заранее благодарен!

Алексей Барыкин
На сайте с 04.02.2008
Offline
272
#1

media queries

vadts
На сайте с 08.03.2008
Offline
153
#2
Digidie:
Доброго времени суток! Нужна помощь. Нужно сделать чтобы на сайте менялся размер шрифта в зависимости от разрешения экрана. Если разрешение большое то шрифт больше, если маленькое то и шрифт соответственно тоже маленький. Подскажите как такое реализовать. Заранее благодарен!

Указывать размер шрифта в % или large, x-large и т.д.

fura.pro, gruzovik.pro, rezume.pro, rezina.pro, prognoz.pro, referat.pro, voditel.pro, zdanie.pro (mailto:vadim@svitonline.com?subject=.pro)
D
На сайте с 09.10.2011
Offline
15
#3

Почему то все так пишут))) У меня сейчас есть скрипт который высчитывает ширину в зависимости от высоты, 4/3 короче. Нужно чтобы размер шрифта менялся в зависимости от разрешения. Попробовал тем способом который вы предлагаете. Что то как то муторно это все, или может я не так делал, оно в принципе и работает, но не цепляет IE, нужно хотя бы чтобы и 8 версия поддерживала. Да и потом на Mac'e разрешение вообще 2500px. Как быть со всем этим. В общем нужно от мобильных устройств до монитора диагональю 27''. Такое можно реализовать?

vadts

Размер шрифта стоит итак в процентах. Но что то никакой разницы я невижу. Если при маленьком разрешении шрифт нормальный то при большом вообще мизерный. Тут больше даже не на уменьшение разрешения а на увеличение, чем больше разрешение, тем больше шрифт)))

vadts
На сайте с 08.03.2008
Offline
153
#4

Привязывайтесь к размеру шрифта, т.е. указывайте в em.

D
На сайте с 09.10.2011
Offline
15
#5

Это не помогает, пробовал выставить для боди 0,7em шрифт тот какой нужен) Потом через медиа попробовал выставить при больших разрешениях другую величину, но почему то не сработало.

vadts
На сайте с 08.03.2008
Offline
153
#6
Digidie:
Это не помогает, пробовал выставить для боди 0,7em шрифт тот какой нужен) Потом через медиа попробовал выставить при больших разрешениях другую величину, но почему то не сработало.

Если не помогает значит чет не так сделали...

покажите поциента...

C
На сайте с 04.02.2005
Offline
274
#7

% и em это здесь, скорей всего не уместны

Хочется человеку, чтобы размер шрифта менялся пропорционально размеру экрана

300x300 size 15px

600x600 size 30px

и т.д

а em как был em так и останется em

Только js

---------- Добавлено 23.10.2012 в 18:31 ----------

media queries

в данной ситуации тоже не помощник.

CSS не обладает возможностью вычислений.

nemartirosyan
На сайте с 06.04.2011
Offline
54
#8

интересная тема, тоже хотелось бы знать решения.

благо заказчики пока такого не просили.

Грамотная верстка. Изготовление сайтов на базе CMS Joomla. (/ru/forum/897104)
G
На сайте с 07.06.2009
Offline
37
#9

Простой скрипт


<head>
<link type="text/css" href="css/1024.css" rel="stylesheet">
<script type="text/javascript">
w=1024;
if (screen.width >= 1152) w=1152;
if (screen.width >= 1280) w=1280;
if (screen.width >= 1360) w=1360;
if (screen.width >= 1600) w=1600;
if (w > 1024) document.write(
'<link type="text/css" href="css/'+w+'.css" rel="stylesheet">'
);
</script>
</head>

Есть основной файл стилей -1024.css

В дополнительных файлах под нужное разрешение

прописываете все что нужно в вашем случае font

---------- Добавлено 24.10.2012 в 15:52 ----------

Можно использовать и другой скрипт, тут на любителя :)


<script type="text/javascript">
var proportion = 860/14;
function resizeFont() { document.body.style.fontSize = parseInt(document.body.offsetWidth/proportion) + 'px' }
onload = onresize = resizeFont;
if (document.addEventListener) document.addEventListener("DOMContentLoaded", resizeFont, null);
</script>

Пример - http://trifler.ru/i/layout/proportions/proportions_fontcg.html

Все о разметке web-страниц (http://csslayout.ru)
C
На сайте с 04.02.2005
Offline
274
#10

body {

font-size:100%

}

element {

font-size:1em

}

а затем скриптом пересчитывать, отталкиваясь от дефолтного значения

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий