0 Пользователей и 1 Гость просматривают эту тему.
  • 33 Ответов
  • 4750 Просмотров
*

Bright

  • Захожу иногда
  • 170
  • 2 / 2
"Универсальный" - это я в смысле чтобы для ПК был один шрифт, а для мобильных автоматически включался другой стиль. И чтобы это видел/понимал Google.
Мне не хотелось бы применять Мобил-Joomla, т.к. нет задачи делать полноценную мобильную поддержку (на моём сайте она и не нужна), но в то же время жутко неприятно смотреть на то, что пишет PageSpeed Insights
Пытался тупо увеличивать шрифт, но сайт становится страшным, а пейджспиду всё мало.
Раньше с этой проблемой мирился, но с переходом с 2.5 на 3.6 пейджспид вообще всю страницу стал браковать...

Можно ли сделать "универсальный шрифт" простым способом, чтобы даже чайник мог сделать?
Может быть как-то использовать в стилях CSS-пиксели? Тогда как?
Или тут простых путей не бывает?
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Я, если честно, нифига не понял. Вы про гарнитуру или кегль? В каком плане «универсальный»?
*

Missile

  • Завсегдатай
  • 1098
  • 90 / 1
Попробуйте размер шрифта задавать не в пикселях, а в em или в %.
*

Bright

  • Захожу иногда
  • 170
  • 2 / 2
Я, если честно, нифига не понял. Вы про гарнитуру или кегль? В каком плане «универсальный»?
Чтобы шрифт на сайте нормально воспринимался мобилками и в то же время не выглядел огромным на ПК.

Попробуйте размер шрифта задавать не в пикселях, а в em или в %.
На что-то подобное и рассчитывал,
нельзя ли подробней, желательно с примером? (в идеале - применимом к моему сайту)
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Вообще, так сейчас не принято делать. Размер шрифта должен быть одинаковым на всех девайсах. Но если сильно нужно, то можно сделать на less. Выводите размер шрифта в переменную, например @global-font-size. Далее, все размеры шрифтов выставляете относительно этого. Например h1 {font-size: @global-font-size * 1.2;}. И последнее, важное, оборачиваете @global-font-size в условия медиа-запросов, и, в зависимости от разрешения, присваиваете нужное значение.
*

Missile

  • Завсегдатай
  • 1098
  • 90 / 1
Цитировать
нельзя ли подробней, желательно с примером?
Размер шрифта указываете не в пикселях (допустим, 14 px), а в em - 1.0 em, 0.9 em, 1.3 em и так далее. Смотрите сайт на разных устройствах и подбирайте оптимальную величину.
Можно вот так ещё сделать:
Код
html {
  font-size: 16px;
 
  @media (min-width: 600px) {
    font-size: 18px;
  }
 
  @media (min-width: 800px) {
    font-size: 20px;
  }
}

Цитировать
Размер шрифта должен быть одинаковым на всех девайсах.
Размер шрифта должен коррелировать с настройками браузера. Если на экране с разрешением 1280х1024 я могу спокойно читать сайт с жёстко заданным размером шрифта в 14px, то на экране с разрешением 1920х1080 текст этого же сайта выглядит очень мелким.
*

Bright

  • Захожу иногда
  • 170
  • 2 / 2
Размер шрифта должен быть одинаковым на всех девайсах.
Теперь моя очередь сказать "нифига не понимаю". У меня ж так сделано - так PageSpeed чуть ли не матом ругается.
Интересно, что на 2.5 он ругался только на модуль "Самое читаемое", пункты меню, да на ДВА анонса (НЕ НА ВСЕ) статей в избранном, а сейчас (на 3.6) красит в красный цвет всю главную страницу... Для меня это загадка.

если сильно нужно, то можно сделать на less. Выводите размер шрифта в переменную, например @global-font-size. Далее, все размеры шрифтов выставляете относительно этого. Например h1 {font-size: @global-font-size * 1.2;}. И последнее, важное, оборачиваете @global-font-size в условия медиа-запросов, и, в зависимости от разрешения, присваиваете нужное значение.
Побочные эффекты какие? Влияет ли на скорость и т.п.?
Реально ли чайнику сделать самостоятельно?
*

Bright

  • Захожу иногда
  • 170
  • 2 / 2
Можно вот так ещё сделать:
Спойлер
[свернуть]
Про em вроде понял, попробую. А этот код не могли бы объяснить?
Я понял так, что надо перечислить варианты ширины девайса, с которого смотрят сайт и присвоить каждой из них свои значения? Но тогда это (полный список) надо будет делать везде, где прописаны шрифты?

Какой из двух ваших вариантов вы считаете лучшим?
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Размер шрифта должен коррелировать с настройками браузера. Если на экране с разрешением 1280х1024 я могу спокойно читать сайт с жёстко заданным размером шрифта в 14px, то на экране с разрешением 1920х1080 текст этого же сайта выглядит очень мелким.

На десткопе масштабируем через Ctrl+(0-9). На мобиле типа щипками. Всё прекрасно масштабируется, в не зависимости от того, в каких единицах указан размер. Плюс, изначально сайт выглядит так, как это задумывали разработчики, а не юзер намудрил. Раньше я и сам пользовался только относительными величинами. А потом мне прострелили колено, после очередного клиента, которого я не смог вразумить, что это не вёрстка кривая, это у него масштаб стоит 900% для шрифтов, я забил на это дело. В любом случае, это древний холивар, в чём измерять шрифты. Я за пиксели, вы за em.

Bright, на скорость не влияет, т.к. работает на стороне пользователя.
*

Missile

  • Завсегдатай
  • 1098
  • 90 / 1
Цитировать
На десткопе масштабируем через Ctrl+(0-9).
Не все пользователи будут это делать (и не все умеют). Некоторых может сразу отпугнуть нечитаемый шрифт. Но я согласна с Вами, что
Цитировать
это древний холивар, в чём измерять шрифты
Цитировать
Я понял так, что надо перечислить варианты ширины девайса, с которого смотрят сайт и присвоить каждой из них свои значения? Но тогда это (полный список) надо будет делать везде, где прописаны шрифты?
Имхо, двух параметров (600px и 800px) вполне достаточно, чтобы покрыть разрешения низкобюджетных мобильных гаджетов - смартов и планшетов. На смартфоне, по-моему, уже меньше 960х540 не делают, а на планшетах - меньше 800х600.
Прописать нужно один раз в главном CSS шаблона - в начале, после тега body.
Цитировать
Какой из двух ваших вариантов вы считаете лучшим?
Я себе в em определяю, но это - дело вкуса. Если начать копать в этом направлении в приступе перфекционизма, то можно до страшных вещей дойти.
*

Bright

  • Захожу иногда
  • 170
  • 2 / 2
Но я согласна
Дак вы еще и девушка?! Тогда вам еще одно отдельное публичное спасибо! :)
Missile, а не могли бы вы дать один-два примера сайтов, где сделано в em и/или с пропиской расширений?

Shustry, при всём уважении...
Что касается холивара про спор шрифтов, то не надо путать. ТОТ холивар был когда мобильных устройств фактически еще не было, а сейчас продажи ПК падают, ноуты, нетбуки, планшеты и мобилы растут. В итоге скоро придется поменять ориентиры - мобильные устройства будут лидировать безусловно и никуда не денешься от того, чтобы это учитывать. Google это понял первым и пытается всем намекнуть, что это... не тот холивар, что был дцать лет назад.
*

FitMe

  • Захожу иногда
  • 310
  • 10 / 2
em - был через некоторое время уступил rem, для примера "проекта" в котором используется он, посмотрите на обновленный Youtube.com и некоторые свеже-обносленные проекты Вами упомянутого Google.

Так же может интересно будет
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Bright, при всём уважении, я так и не понял, как использование px негативно сказывается на мобильной вёрстке. Особенно мне тяжело это понять в свете овер хофига свёрстанных и успешно сданных проектов с адаптивной вёрсткой. Всё приемущество em и rem в относительности. Измеряем в условных единицах базового шрифта. Безусловно удобно, если верстаешь на голом CSS. Я же верстаю на LESS, где эта величина вынесена в переменную. Здесь нет нужны в rem и em. В UIkit всё построено на пикселях. Это ли не современный фреймворк, адаптированные под все устройства? По-моему скромному мнению, это вообще эталон. Слоупок bootstrap лишь в последней редакции перешёл местами на em. При этом, адаптивную вёрстку на нём делают так же, довольно давно. Возвращаясь в теме: дело вкуса. Кому-то удобнее использовать миксины и переменные LESS/SASS и обходиться без условных едениц, кому-то по-старинке. Я за прогресс.
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Так же может интересно будет

Ту же самую статью хотел скинуть. ^-^. Так конкретно о различиях rem и em. Где, что и как использовать. Мне удобнее в пикселях.
*

Bright

  • Захожу иногда
  • 170
  • 2 / 2
Ту же самую статью хотел скинуть. ^-^. Так конкретно о различиях rem и em. Где, что и как использовать. Мне удобнее в пикселях.
То ли вы лукавите, то ли кокетничаете, то ли не понимаете... Вам "удобнее в пикселях", НО "на LESS. Разве неясно, что это "что в лоб, что по лбу"? По-любому речь идет об адаптивности, только разными методами! Я до LESS не дорос, до комбинирования  rem+em, пожалуй, тоже.
Значит мне осталось выбрать rem или em.

Разговор получился очень интересным, всем СПАСИБО!
Отдельное спасибо FitMe за ссылку на Хабрахабр (умнющий мужичище написал статью) и за примеры Ютуба с Гуглом, подтверждающие правильность моих раскопок. :)
А я пошел выбирать и думать стоит ли в это ввязываться. )

Если выберу и решусь, поможете? ;)
« Последнее редактирование: 25.07.2016, 00:47:34 от Bright »
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
То ли вы лукавите, то ли кокетничаете, то ли не понимаете... Вам "удобнее в пикселях", НО "на LESS. Разве неясно, что это "что в лоб, что по лбу"? По-любому речь идет об адаптивности, только разными методами! Я до LESS не дорос, до комбинирования  rem+em, пожалуй, тоже.

Много чести. Вы ничего не поняли. Впрочем, всё флуд. :(
*

Bright

  • Захожу иногда
  • 170
  • 2 / 2
Дел.
Сорри, поторопился с вопросом и как минимум неправильно его сформулировал. Пошел копать дальше.

Кстати, нашел интересную статью по теме:
Отзывчивость в CSS
« Последнее редактирование: 25.07.2016, 14:07:00 от Bright »
*

Bright

  • Захожу иногда
  • 170
  • 2 / 2
Прописать нужно один раз в главном CSS шаблона - в начале, после тега body.Я себе в em определяю
Сделал ТАК (синим то, что добавил):
Спойлер
[свернуть]

PageSpeed Insights на это никак не отреагировал - те же замечания и с теми же размерами шрифтов.
*

AlekVolsk

  • Гуру
  • 6915
  • 415 / 4
Bright, походу вы так и не поняли ничего.

1rem - это базовый размер шрифта, заданный для HTML или боди, если базовый размер не задан - браузер задает его сам! по дефолту это 16px
базовый размер задается либо в пикселях (px) либо в пунктах (pt, гуглите на тему пунктов сами, но в веб это малораспространенная единица, пункты - это из печатной типографики) и не может задаваться в иных единицах

1em - это размер шрифта непосредственного родителя, если у непосредственного родителя конкретный размер не задан - используется значение более старшего непосредственного родителя, и так вверх по дереву вложенности элементов вплоть до конкретного указания значения

в вашем примере вы задали базовый размер в 16px и переопределили его для более больших экранов как 16px*20 и 16px*24, т.е. 320px и 384px соответственно
кстати, ваше переопределение для больших экранов не будет работать: в CSS не допускается вложенность селекторов друг в друга, правильный код:
Код: css
body,html
{
  padding: 0;
  margin: 0;
  margin-bottom: 10px;
  font-size: 16px;
}

@media (min-width: 600px)
{
  body,html
  {
    font-size: 20px;
  }
}

@media (min-width: 800px)
{
  body,html
  {
    font-size: 24px;
  }
}
*

Bright

  • Захожу иногда
  • 170
  • 2 / 2
Bright, походу вы так и не поняли ничего.
ваше переопределение для больших экранов не будет работать: в CSS не допускается вложенность селекторов друг в друга, правильный код:
Походу я не удивлён, до мастера мне далеко и я просто скопировал код мастера покруче меня, а из других мастеров только вы написали, что код некорректный.
А так вообще спасибо - после вашего ответа в голове стало светлей )
Но на ваш код сайт тоже не отреагировал. Т.е. ВООБЩЕ никак.
Полностью почистил кэш (в т.ч. устаревший) - тоже не помогло.

Спойлер
[свернуть]
*

AlekVolsk

  • Гуру
  • 6915
  • 415 / 4
Спойлер
[свернуть]
Спасибо, но я не ориентировался на такие древности, обновляйтесь до последних версий - и будет вам счастье

Но на ваш код сайт тоже не отреагировал. Т.е. ВООБЩЕ никак.
Полностью почистил кэш (в т.ч. устаревший) - тоже не помогло.
Урл на сайт, по другому помочь не получится
« Последнее редактирование: 26.07.2016, 13:40:35 от AlekVolsk »
*

Bright

  • Захожу иногда
  • 170
  • 2 / 2
Спасибо, но я не ориентировался на такие древности
Версия не последняя, но и не древность. Она вышла, уже после того, как Опера отказалась от своего движка.
Не более года назад!


Урл на сайт, по другому помочь не получится
Урл на сайт
*

AlekVolsk

  • Гуру
  • 6915
  • 415 / 4
Версия Opera уже 29 )) 12я ветка прекратила свое существование еще в 2012 ))
*

AlekVolsk

  • Гуру
  • 6915
  • 415 / 4
http://prntscr.com/bxoce5 уверены, что правильно задаете селектор? а если закомментировать 41 строку?
*

AlekVolsk

  • Гуру
  • 6915
  • 415 / 4
свыше 800px http://prntscr.com/bxodkr

свыше 600px http://prntscr.com/bxoe9e

менее 600px http://prntscr.com/bxoeki

учитесь пользоваться инспектором кода браузера, волшебная комбинация клавиш: Ctrl+Shift+I
*

Bright

  • Захожу иногда
  • 170
  • 2 / 2
Версия Opera уже 29 )) 12я ветка прекратила свое существование еще в 2012 ))
Вы правы, но не совсем. Повторюсь, 12.18 вышла порядка года назад.
И, поверьте, я это знаю не хуже, чем вы знаете CSS :)

учитесь пользоваться инспектором кода браузера, волшебная комбинация клавиш: Ctrl+Shift+I
Давно знаю комбинацию и учусь пользоваться. Пока получается как у обезьяны с гранатой. Вы уж извините...
Я и так много чего выучил после 50-ти... Как-то не получается чтобы всё и сразу выучить хорошо.

Пошел разбираться с вашими картинками. Спасибо!
*

Bright

  • Захожу иногда
  • 170
  • 2 / 2
учитесь пользоваться инспектором кода браузера, волшебная комбинация клавиш: Ctrl+Shift+I
Вставил ваш код и пришлось полностью уйти в доводку сайта после миграции 2.5-3.6 (было очень много проблем). Сегодня вернулся к вопросу "универсальности". Замучал вашу волшебную комбинацию - и комментил стили, и смотрел на изменения, в т.ч. при переключениях и... далеко не всё понял. Того, что понял, маловато будет. :)
В частности, долго искал justify - даже поиск не помог. Потом сообразил, что вы возможно дописали style="text-align:justify;"
Ну и я дописал. Вроде тоже разница какая-то есть.
Но сохранять изменения на таком уровне понимания не стал. Тем более, что 16 и 24 включались, а 20px смог полюбоваться только в зачеркнутом состоянии.

Не могли бы вы дать окончательный рецепт - где/что поменять и где/что добавить?
Можно с пояснениями, а можно и без - не хочу вас сильно напрягать.
« Последнее редактирование: 29.07.2016, 20:57:43 от Bright »
*

AlekVolsk

  • Гуру
  • 6915
  • 415 / 4
поиграйтесь с последовательностью вывода @media - это важно
*

Bright

  • Захожу иногда
  • 170
  • 2 / 2
поиграйтесь с последовательностью вывода @media - это важно
Я только и делаю, что играюсь методом ненаучного тыка.
Гуглю, читаю, спрашиваю и... опять играюсь. Если честно, уже наигрался.
*

Bright

  • Захожу иногда
  • 170
  • 2 / 2
поиграйтесь с последовательностью вывода @media - это важно
AlekVolsk, ну так что - не поможете?
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Как отобразить текст только на мобильных, на Пк и планшетах скрыть?

Автор web1

Ответов: 6
Просмотров: 1697
Последний ответ 20.09.2022, 22:14:03
от darkghost
Настройка рекламного блока для мобильных

Автор Lovenokia

Ответов: 1
Просмотров: 1284
Последний ответ 26.04.2017, 00:37:31
от darkghost
Google считает что шаблон Protostar не оптимизирован для мобильных устройств

Автор webCactus

Ответов: 3
Просмотров: 1181
Последний ответ 18.11.2016, 08:46:48
от webCactus
Как разместить шрифт Times New Roman локально?

Автор Ferum1

Ответов: 3
Просмотров: 1880
Последний ответ 06.10.2016, 19:20:48
от Ferum1
Свои стили для мобильных устройств

Автор kik84

Ответов: 14
Просмотров: 3929
Последний ответ 05.10.2016, 00:18:04
от serjik