Форум Сайтостроение Веб-строительство

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

D
На сайте с 09.10.2011
Offline
15
Digidie
23293

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

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

media queries

https://adminbook.ru/
vadts
На сайте с 08.03.2008
Offline
153
vadts
#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
Digidie
#3

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

vadts

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

В каких единицах нужно Через мобильные устройства 15.6" 1920x1080 vs 17.3''
vadts
На сайте с 08.03.2008
Offline
153
vadts
#4

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

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

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

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

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

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

C
На сайте с 04.02.2005
Offline
291
Chukcha
#7

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

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

300x300 size 15px

600x600 size 30px

и т.д

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

Только js

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

media queries

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

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

В каких единицах нужно Не могу найти всю Изменение кода Adsense
N
На сайте с 06.04.2011
Offline
53
nemartirosyan
#8

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

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

Грамотная верстка. Изготовление сайтов на базе CMS Joomla. (/ru/forum/897104)
G
На сайте с 07.06.2009
Offline
37
gordi
#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
291
Chukcha
#10

body {

font-size:100%

}

element {

font-size:1em

}

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

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