Я преобразовываю my forum в отзывчивый дизайн, используя Bootstrap, но я, серьезно борясь с типографикой. Несмотря на то, что шрифт находится в EM, на планшетных устройствах размер шрифта заканчивается намного меньшим, чем на рабочем столе.Размер шрифта установлен на EM, но не масштабируется для планшета?
Так что мне нужно возиться со средствами массовой информации, чтобы увеличить размер шрифта для небольших устройств. И это борьба. Я сделал что-то не так?
Использование EM не будет вам результат вы хотите:
ЕМ равен текущему размеру шрифта, например, если размер шрифта в документе 12pt, 1em равен 12 пт , Ems являются масштабируемыми по своей природе, поэтому 2em будет равен 24pt, .5em будет равен 6pt и т. Д.
EM всегда будет одинаковым для любого размера видового экрана, поскольку он зависит от размера шрифта, который вы изначально устанавливали.
Если вы хотите использовать окно просмотра spezific размеры шрифта, использование виртуальной машины или VH вместо:
1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger
h1 {
font-size: 5.9vw;
}
Спасибо, но я думал, что размеры шрифтов в видовом режиме не поддерживаются в некоторых браузерах. Или есть простой способ использовать видовое окно как первичное, а EM - резервное копирование? EDIT: Я вижу, есть, спасибо. – Mark
я узнал причину, почему я Нуждаясь увеличить размер шрифта в противоположном (увеличить его для небольших устройств).
Все это было связано с тем, что начальная шкала была ниже 1. Как только я установил ее в 1 и выяснил, почему мне пришлось сделать ее ниже 1, все проблемы с текстом были решены.
Вы должны действительно предоставить [Минимальный, полный и проверенный пример] (http://stackoverflow.com/help/mcve), а не связывать весь свой сайт. – DavidG
Ну для начала у вас есть медиа-запрос, который увеличивает размер шрифта с 1.33em до 2.1em, когда он достигает 767px. К сожалению, типографика не масштабируется, и вам придется использовать медиа-запросы. Существуют методы с частичной реализацией, но я предпочитаю придерживаться фактов. Задайте приоритеты устройств и рассмотрите интервалы, в которые вам нужно будет изменить их все. –
Медиа-запрос для 767px основан на определении мобильного устройства Bootstrap. Я должен увеличить размер шрифта для мобильных устройств, иначе он слишком мал. Я также должен сделать это для планшетов тоже, что было сложно, потому что я изо всех сил пытался создавать медиа-запросы, которые вызывают некоторые Android-планшеты без запуска рабочих столов с одинаковым разрешением. На рабочем столе шрифт выглядит отлично, независимо от разрешения. Но не на планшетах. – Mark