У меня есть текучий сайт, а меню - 20% его ширины. Я хочу, чтобы размер шрифта меню был правильно измерен, поэтому он всегда соответствует ширине окна и никогда не переносится на следующую строку. Я думал об использовании "em" в качестве единицы, но это касается размера шрифта браузера, поэтому, когда я меняю разрешения, размер шрифта остается неизменным.
Пробовал также pts и проценты. Ничто не работает так, как мне нужно...
Дайте мне понять, как действовать, пожалуйста.
@media screen and (max-width : 320px)
{
body or yourdiv element
{
font:<size>px/em/rm;
}
}
@media screen and (max-width : 1204px)
{
body or yourdiv element
{
font:<size>px/em/rm;
}
}
Вы можете дать его вручную в зависимости от размера экрана экрана. Просто посмотрите размер экрана и вручную добавьте размер шрифта.
Вы можете использовать em, %, px. Но в сочетании с media-queries Посмотрите эту ссылку, чтобы узнать о медиа-запросах. Кроме того, CSS3 имеет несколько новых значений для определения размеров относительно текущего размера видового экрана: vw, vh и vmin. См. ссылка об этом.
Я разработал приятное решение JS, которое подходит для полностью реагирующего HTML (т.е. HTML, построенного с процентами)
Я использую только "em" для определения размеров шрифта.
Размер шрифта html равен 10 пикселям:
html {
font-size: 100%;
font-size: 62.5%;
}
Я вызываю функцию изменения шрифта в готовом документе:
//для этого требуется JQuery
function doResize() {
// FONT SIZE
var ww = $('body').width();
var maxW = [your design max-width here];
ww = Math.min(ww, maxW);
var fw = ww*(10/maxW);
var fpc = fw*100/16;
var fpc = Math.round(fpc*100)/100;
$('html').css('font-size',fpc+'%');
}
Существует несколько способов достижения этого
Использовать медиа-запрос, но для этого требуются размеры шрифта для нескольких точек останова
body
{
font-size: 22px;
}
h1
{
font-size:44px;
}
@media (min-width: 768)
{
body
{
font-size: 17px;
}
h1
{
font-size:24px;
}
}
Используйте размеры в % или em. Просто измените размер базового шрифта, все изменится. В отличие от предыдущего, вы можете просто изменить шрифт тела, а не h1 каждый раз, или позволить размер базового шрифта по умолчанию устройства и оставить все в em
CSS3 поддерживает новые измерения, относящиеся к виду порта. Но это не работает в android
3.2vmax = Больше 3.2vw или 3.2vh
body
{
font-size: 3.2vw;
}
см. css-tricks.com/...., а также посмотрите caniuse.com/....
Вы можете попробовать этот инструмент: http://fittextjs.com/
Я не использовал этот второй инструмент, но кажется похожим: https://github.com/zachleat/BigText
Не знаю, почему это сложно. Я бы сделал этот базовый javascript
<body onresize='document.getElementsByTagName("body")[0].style[ "font-size" ] = document.body.clientWidth*(12/1280) + "px";'>
Где 12 означает 12px при разрешении 1280. Вы решаете, какое значение вы хотите здесь.
Я создал вариант fooobar.com/questions/119341/...
где вы можете установить минимальный и максимальный размер текста в отношении минимального и максимального размера поля, который вы хотите "проверить". Кроме того, вы можете проверить размер элемента dom, отличный от поля, в котором вы хотите применить размер текста.
Вы изменяете размер текста между 19px и 25px на элементе # size-2 на основе ширины 500px и 960px элемента # size-2
resizeTextInRange(500,960,19,25,'#size-2');
Вы изменяете размер текста между 13px и 20px на элементе # size-1, основываясь на ширине тела тела 500px и 960px.
resizeTextInRange(500,960,13,20,'#size-1','body');
полный код есть https://github.com/kiuz/sandbox-html-js-css/tree/gh-pages/text-resize-in-range-of-text-and-screen/src
function inRange (x,min,max) {
return Math.min(Math.max(x, min), max);
}
function resizeTextInRange(minW,maxW,textMinS,textMaxS, elementApply, elementCheck=0) {
if(elementCheck==0){elementCheck=elementApply;}
var ww = $(elementCheck).width();
var difW = maxW-minW;
var difT = textMaxS- textMinS;
var rapW = (ww-minW);
var out=(difT/100)*(rapW/(difW/100))+textMinS;
var normalizedOut = inRange(out, textMinS, textMaxS);
$(elementApply).css('font-size',normalizedOut+'px');
console.log(normalizedOut);
}
$(function () {
resizeTextInRange(500,960,19,25,'#size-2');
resizeTextInRange(500,960,13,20,'#size-1','body');
$(window).resize(function () {
resizeTextInRange(500,960,19,25,'#size-2');
resizeTextInRange(500,960,13,20,'#size-1','body');
});
});
Следующий код будет работать.
@media (max-width: <size>em) { <.class> { font-size: <size>em } }
max-width можно заменить на min-width Используется для определения того, когда этот код будет активирован/деактивирован на основе размера экрана.
<.class> - объект, который вы хотите использовать.
font-size можно заменить многими другими свойствами CSS.
Я рекомендую использовать следующий код, чтобы позволить @media функционировать.
em может быть заменен любой другой переменной размера: px % vh vw (и т.д.)
<meta name="viewport" content="width=device-width, initial-scale=1">