У меня есть плавный веб-сайт, и меню составляет 20% его ширины. Я хочу, чтобы размер шрифта меню измерялся правильно, чтобы он всегда соответствовал ширине рамки и никогда не переносился на следующую строку. Я думал об использовании «em» как единое целое, но оно зависит от размера шрифта браузера, поэтому при изменении разрешения размер шрифта остается неизменным.
Пробовал также оч и проценты. Ничто не работает так, как мне нужно .
Дайте мне подсказку, как поступить, пожалуйста.
Вы можете дать его вручную в зависимости от размера экрана. Просто посмотрите на другой размер экрана и добавьте размер шрифта вручную.
Вы можете использовать em , % , px . Но в сочетании с media-queries смотрите эту ссылку, чтобы узнать о медиа-запросах. Кроме того, у CSS3 есть некоторые новые значения для определения размеров относительно текущего размера области просмотра: vw , vh и vmin . Смотрите ссылку об этом.
Я разработал хорошее решение JS, которое подходит для полностью адаптивного HTML (т.е. HTML, построенный с процентами)
Я использую только «em» для определения размеров шрифта.
Размер шрифта HTML установлен на 10 пикселей:
Я вызываю функцию изменения размера шрифта в готовом документе:
// это требует JQuery
Есть несколько способов добиться этого
Используйте медиа-запрос, но требуются размеры шрифта для нескольких точек останова
Используйте размеры в % или em . Просто измените базовый размер шрифта, все изменится. В отличие от предыдущего, вы можете просто менять основной шрифт, а не h1 каждый раз, или оставить базовый размер шрифта по умолчанию для устройства и оставить все в памяти.
- «Ems» (em) : «em» является масштабируемой единицей. Em равен текущему размеру шрифта, например, если размер шрифта документа 12pt, 1em равен 12pt. Ems по своей природе масштабируемы, поэтому 2em будет равно 24pt, .5em будет равно 6pt и т. Д.
- Процент (%) : процентная единица очень похожа на единицу «em», за исключением нескольких фундаментальных различий. Прежде всего, текущий размер шрифта равен 100% (т.е. 12pt = 100%). При использовании процентной единицы ваш текст остается полностью масштабируемым для мобильных устройств и для обеспечения доступности.
CSS3 поддерживает новые измерения, относящиеся к порту просмотра. Но это не работает в Android
- 3.2vw = 3.2% ширины области просмотра
- 3.2vh = 3.2% от высоты области просмотра
- 3.2vmin = меньше 3.2vw или 3.2vh
У меня есть жидкий веб-сайт, и меню составляет 20% от его ширины. Я хочу, чтобы размер шрифта меню измерялся правильно, чтобы он всегда соответствовал ширине коробки и никогда не переносился на следующую строку. Я думал использовать " em " как единицу, но это относительно размера шрифта браузера, поэтому при изменении разрешения размер шрифта остается прежним.
пробовал также pts и проценты. Ничто не работает так, как мне нужно.
дайте мне подсказку, как действовать, пожалуйста.
8 ответов
вы можете дать его вручную в соответствии с размером экрана экрана.Просто посмотрите на другой размер экрана и добавьте вручную размер шрифта.
можно использовать em , % , px . Но в сочетании с media-queries ссылка, чтобы узнать о медиа-запросов. Кроме того, CSS3 имеет некоторые новые значения для определения размеров относительно текущего размера окна просмотра: vw , vh и vmin . См.ссылке об этом.
Я разработал хорошее решение JS, которое подходит для полностью отзывчивого HTML (т. е. HTML, построенный с процентами)
Я использую только "em" для определения размеров шрифта.
размер шрифта html установлен в 10 пикселей:
Я вызываю функцию изменения размера шрифта в document-ready:
/ / для этого требуется JQuery
есть несколько способов достичь этого
использовать медиа-запросов но требуется размер шрифта для нескольких точек останова
использовать габариты в % или em. Просто измените размер базового шрифта, все изменится. В отличие от предыдущего, вы можете просто изменить шрифт тела, а не h1 каждый раз или позволить базовому размеру шрифта по умолчанию устройства и отдохнуть в em
- " Ems " (em):" em " является масштабируемым блок. Em равен текущему размеру шрифта, например, если размер шрифта документа равен 12pt, 1em равен 12pt. Ems масштабируемы по своей природе, поэтому 2em будет равно 24pt .5em будет равно 6pt и т. д..
- процентов (%): единица процента очень похожа на единицу "em", за исключением нескольких фундаментальных различий. Прежде всего, текущий размер шрифта равен 100% (т. е. 12pt = 100%). При использовании единицы процента текст остается полностью масштабируемым для мобильных устройств приборы и для доступности.
С помощью CSS3 поддерживает новые размеры относительно порта просмотра. Но это не работает в android
- 3.2 РР = 3,2% от ширины окна просмотра
- 3.2 vh = 3.2% высоты окна просмотра
- 3.2 vmin = меньше 3.2 vw или 3.2 VH
Как масштабировать размер шрифта в зависимости от размера экрана? Не путать с процентным соотношением дефолтного размера шрифта в body. Нужна именно зависимость от размеров экрана устройства.
Есть новые единицы измерения vw и vh.
1vw = 1% от ширины окна. При уменьшении ширины окна, уменьшается ширина и высота шрифта элемента.
1vh = 1% от высоты окна. При уменьшении высоты окна, уменьшается ширина и высота шрифта элемента.
Они уже поддерживаются современными браузерами. В том числе и на мобильных устройствах.
Добавить комментарий Отменить ответ
Для отправки комментария вам необходимо авторизоваться.
Загрузка...
