• Страница 1 из 1
  • 1
Модератор форума: Yuri_G  
Сообщество uCoz » Вебмастеру » Юзабилити » Масштабирование текста?
Масштабирование текста?
allonemoon
Сообщений: 58
Репутация: 4

Сообщение # 1 | 07:07:45
Привет все! Подскажите как можно решить вопрос масштабирования текста в DIV блоке? Во общем делаю сайт, отображается он вроде корректно при разрешении экрана 1024 на 768. Но столкнулся с проблемой что при разрешении 1366х768 текст в описании к материалам отображается нормально как и должен а при 1024х768 он уже вылезает за границы? Как можно решить данную проблему? Ещё интересует вопрос такого характера под какое разрешение экрана лучше всего верстать сайт? адрес проекта www.kinoiserial.ucoz.ru

"Нет больше печали, чем вспоминать о счасть в минуты страданий" - Данте Алигьери, Божественная комедия "Ад"
Inquisitоr
Сообщений: 900
Репутация: 338

Сообщение # 2 | 11:56:48
Цитата allonemoon ()
Но столкнулся с проблемой что при разрешении 1366х768 текст в описании к материалам отображается нормально как и должен а при 1024х768 он уже вылезает за границы? Как можно решить данную проблему?

Где именно такое наблюдается?

Цитата allonemoon ()
Ещё интересует вопрос такого характера под какое разрешение экрана лучше всего верстать сайт?

Лучше всего - адаптивный дизайн.

Учитесь читать, читая - вчитывайтесь, вчитываясь - вдумывайтесь, вдумываясь - понимайте, поняв - делайте. ©
sch779
Сообщений: 703
Репутация: 348

Сообщение # 3 | 12:11:35

Цитата Inquisitоr ()
Лучше всего - адаптивный дизайн.

И именно в этом случае и нужен сабж!
При адаптивном дизайне все нормально с картинками - растягиваются/сжимаются как нужно.
А вот текст, увы - 16px, который нормально смотрится на 1024-1100, на 1300 уже мелковат, а при 1600 и больше - вообще не читабельный!
Смысл использовать адаптивный дизайн, если на больших мониторах все равно ничего не прочитаешь!?
Такой дизайн хорош для планшетов и телефонов - лишние блоки убираются, а другие соответственно трансформируются и читабельностью текста проблем нет.
Имхо, авторы стандартов css/html явно не предусмотрели универсальный и удобный способ масштабирования текста при масштабировании родительских блоков!

А пока же лучше всего ориентироваться на 1024-1300 по ширине - нормально будет смотреться на нетбуках/ноутах/большинстве десктопов. А если еще и использовать алгоритмы адаптивного дизайна, когда в зависимости от максимального разрешения экрана
прямо в css можно менять макет страниц, то и на мобильных устройствах будет нормально смотреться!
Сообщение отредактировал sch779 - Среда, 01 Апр 2015, 12:17:30
Inquisitоr
Сообщений: 900
Репутация: 338

Сообщение # 4 | 12:33:32
Цитата sch779 ()
Имхо, авторы стандартов css/html явно не предусмотрели универсальный и удобный способ масштабирования текста при масштабировании родительских блоков!

Дело уже и не в стандартах даже, а в браузерах. Использование "новых" стандартов не всеми браузерами будет поддерживаться, что в свою очередь рождает вопрос о кроссбраузерности. Палка о двух концах.

Цитата sch779 ()
А пока же лучше всего ориентироваться на 1024-1300 по ширине - нормально будет смотреться на нетбуках/ноутах/большинстве десктопов. А если еще и использовать алгоритмы адаптивного дизайна, когда в зависимости от максимального разрешения экрана

Это, в принципе, хороший совет.

Учитесь читать, читая - вчитывайтесь, вчитываясь - вдумывайтесь, вдумываясь - понимайте, поняв - делайте. ©
Вансан
Сообщений: 77
Репутация: 33

Сообщение # 5 | 13:34:44
Цитата sch779 ()
При адаптивном дизайне все нормально с картинками - растягиваются/сжимаются как нужно.
А вот текст, увы - 16px, который нормально смотрится на 1024-1100, на 1300 уже мелковат, а при 1600 и больше - вообще не читабельный!
Смысл использовать адаптивный дизайн, если на больших мониторах все равно ничего не прочитаешь!?

А что вам мешает с помощью всё тех же @media прописать в css размер текста для широкоформатных мониторов?

Absit invidia verbo
sch779
Сообщений: 703
Репутация: 348

Сообщение # 6 | 01:26:33
Цитата Вансан ()
А что вам мешает с помощью всё тех же @media прописать в css размер текста для широкоформатных мониторов?
Мешает именно то, что изначально практически все шаблоны верстались без возможности адаптивной верстки - т.е., практически везде в css, включая инлайн стили, используются px/pt!
Т.е., что бы последовать Вашему совету, нужно все css и шаблоны переписать под em, что является весьма нетривиальной задачей!
Остается, правда, еще одна проблема - что делать с теми инлайн стилями, которые генерятся самой системой в коде $BODY$ - к сожалению, не все элементы, генерируемые при этом имеют свой класс, который можно было бы переопределить!
Вансан
Сообщений: 77
Репутация: 33

Сообщение # 7 | 16:40:42
Цитата sch779 ()
Т.е., что бы последовать Вашему совету, нужно все css и шаблоны переписать под em, что является весьма нетривиальной задачей!


Я не про em, я про:

Код
@media (min-width: 768px) {
   body {
     font-size: 15px;
   }
}
@media (min-width: 992px) {
   body {
     font-size: 16px;
   }
}
@media (min-width: 1200px) {
   body {
     font-size: 17px;
   }
}


А инлайн стили (style="") в любом случае нужно удалять нещадно при первой возможности.

Цитата sch779 ()
Остается, правда, еще одна проблема - что делать с теми инлайн стилями, которые генерятся самой системой в коде $BODY$ - к сожалению, не все элементы, генерируемые при этом имеют свой класс, который можно было бы переопределить!


Я для такого использую извращенские CSS селекторы, ну и important конечно, без него в ucoz никуда!

Как-то так например:

Код
.ucoz-parent-class > tbody > tr:nth-child(2) > td:nth-child(1) {
   font-size: inherit !important;
   height: auto !important;
}

Absit invidia verbo
sch779
Сообщений: 703
Репутация: 348

Сообщение # 8 | 17:56:10
Цитата Вансан ()
Я не про em, я про:
Я понял и посетовал, что для использования медиа нужно, что бы все размеры были заданы или в em или в % - тогда будет достаточно задать всего несколько правил для разных разрешений что бы переключали размер шрифта для body. В противном случае, что мы видим в большинстве существующих шаблонов, придется в каждом медиа-правиле изменять явно размеры большинства блоков и текста!

Цитата Вансан ()
Как-то так например:
Увы, даже такие супернавороченные правила не дают возможности добраться до некоторых элементов! Ну и не следует забывать, что nth-child, к примеру, поддерживается начиная с ie9 - а еще немало можно встретить xp-ек с семеркой и висту с восьмеркой, в которых такой селектор не сработает!
Вансан
Сообщений: 77
Репутация: 33

Сообщение # 9 | 10:53:57
Цитата sch779 ()
Увы, даже такие супернавороченные правила не дают возможности добраться до некоторых элементов! Ну и не следует забывать, что nth-child, к примеру, поддерживается начиная с ie9 - а еще немало можно встретить xp-ек с семеркой и висту с восьмеркой, в которых такой селектор не сработает!

Ну, тут уже принцип изящной деградации - кто сидит на осликах получит мелкий текст, но всё же получит.

Absit invidia verbo
adminsayta
Сообщений: 47
Репутация: 10

Сообщение # 10 | 18:07:54
А использовать это для body?
Код
body {
font-family:Arial, sans-serif;
font-size:100%;
}

и это


Код
h1 {
font-size:150%;
}

h2 {
font-size:125%;
}

h3 {
font-size:112.5%;
}

h5 {
font-size:90%;
}

h6 {
font-size:80%;
}

Категорически запрещается любая реклама, в том числе реклама интернет-проектов.
Dogica
Сообщений: 1230
Репутация: 353
Уровень замечаний:

Сообщение # 11 | 20:50:55
Цитата adminsayta ()
h1 {font-size:150%;
}

h2 {
font-size:125%;
}

h3 {
font-size:112.5%;
}

h5 {
font-size:90%;
}

h6 {
font-size:80%;
}
это вообще использовать не стоит..
H1 один раз на страничке - все остальное в топку.


WWW.DOGICA.COM / WWW.DOGICA.ORG
happy33white
Сообщений: 4
Репутация: 0

Сообщение # 12 | 22:11:28
Делал логотип со следующими стилями


Код
.LogoText{float:left;color:#d3d3d3;padding:12px 10px;}
.LogoText h1{font-size:45px;font-size: 5.0vh;}
.LogoText h2{font-size:20px;font-size: 2.5vh;}
.LogoText li{display: inline;}


Уменьшается - увеличивается текст автоматически при изменении размера экрана. Может будет полезным кому smile
Сообщество uCoz » Вебмастеру » Юзабилити » Масштабирование текста?
  • Страница 1 из 1
  • 1
Поиск: