Есть ли способ сделать font-size относительно размера страницы? Применение процента в качестве единицы относится к стандартным размерам шрифта (например, 90% от 12 пикселей, а не 90% страницы!). Это отличается от поведения большинства других тегов.
Любой способ сделать масштаб страницы "вверх и вниз" также шрифтами? Должен ли я полагаться на em?
Спасибо
Нет, вы не можете установить размер шрифта в процентах относительно размера страницы.
Размер в em основан на размере относительно того, как обычно будет отображаться шрифт в 16 точках.
Если вы хотите, чтобы ваша страница масштабировалась вверх и вниз и сохраняла какую-то шкалу сама по себе, поля и шрифт, а затем установили его в em, было бы хорошо.
Этот метод позволит масштабировать шрифты и прямоугольники страницы, чтобы они росли с относительным размером друг с другом и, надеюсь, не имели бы вещей, выходящих за границы и границы.
См. новые единицы CSS vh и vw. Поддержка браузера еще невелика.
http://snook.ca/archives/html_and_css/vm-vh-units
Недавно он появился в WebKit: https://bugs.webkit.org/show_bug.cgi?id=27160
В браузерах, поддерживающих его, 1 vh составляет 1% (1/100) высоты окна просмотра, а 1 vw - 1% (1/100) ширины окна просмотра. Существуют также единицы vmin и vmax, которые представляют собой меньшую из двух и более крупных из них соответственно.
Попробуйте плагин jQuery, например FitText. Он автоматически форматирует текст в соответствии с шириной родительского элемента.
Вот немного script Я сделал для exacly что (используйте его как резерв, когда vw не поддерживается) https://gist.github.com/2475269
Еще один неидеальный ответ заключается в том, чтобы использовать серию таких контрольных точек css:
h1 { font-size: 22px; color: orange; }
@media only screen and (max-width: 900px) {
h1 { font-size: 20px; color: blue; }
}
@media only screen and (max-width: 800px) {
h1 { font-size: 18px; color: green; }
}
@media only screen and (max-width: 700px) {
h1 { font-size: 12px; color: red; }
}
На мой взгляд, диапазон видимых плотностей пикселей, наблюдаемый зрителем веб-страницы, теперь массивный, от HTC One, который удерживается на расстоянии 12 дюймов от лица, где имеется 5600 пикселей/радиан, возможно, на 50-дюймовом плазменном экране работает на 480p, что составляет около 950 пикселей/радиан на 4 фута.
Или иначе, шрифт 20px почти в 6 раз больше в вашем поле зрения на этом плазменном экране, чем последний телефон.
Решение, которое я приготовил, состояло в том, чтобы установить размер шрифта тела в абсолютных пикселях как кратность window.screenWidth, но ограничить его до минимального количества единиц, а затем использовать em для всех размеров шрифта после этого. Правильное использование заголовков em должно означать, что доступность прекрасна.
Я добавляю эту функцию на страницу (или ее JS), чтобы установить размер:
function setFontSize() {
pagesized = window.innerWidth / 30; // Proportionate font size to page
pagesized = Math.max(pagesized, 14); // Set size to be no less than 14 px
pagesized = Math.min(pagesized, 30); // & No greater than 30 px
document.body.style.fontSize = pagesized; // Set body default font size
}
Для выполнения этой работы в тег body добавляется следующее:
<body onresize="setFontSize()" onload="setFontSize()">
Затем вы просто используете свой CSS (или встроенное форматирование) на основе% или em единиц, и все должно хорошо масштабироваться в пределах этих границ.
Или, в JQuery, вы можете сделать:
$(window).resize(function() {
pagesized = $(window).innerWidth() / 30; // Proportionate font size to page
pagesized = Math.max(pagesized, 14); // Set size to be no less than 14 px
pagesized = Math.min(pagesized, 30); // & No greater than 30 px
$('body').css('font-size', pagesized); // Set body default font size
});
Как минимум для Firefox, 1em можно использовать для установки размера шрифта, связанного с размером шрифта родителя. Поэтому, если вы установите размер шрифта для тела в значение, которое находится в соотношении к размеру страницы. Все шрифты под телом, которые используют "em" в качестве единицы, будут относиться к странице.
Чтобы сделать это, вы должны установить размер тела относительно страницы типа height: 100% или width, если вы хотите связать размер с шириной.
Затем вам придется постоянно синхронизировать высоту тела с размером шрифта. Это можно сделать с помощью 'onResize'.
Подробнее см. в ссылка.
Я рекомендую использовать YUI reset, чтобы унифицировать рендеринг шрифтов в разных браузерах. Затем проверьте размер шрифта YUI. После этого вы можете полагаться на свои шрифты, чтобы отображать их правильно.
Вы можете решить это следующим образом:
jQuery(document).ready(function ($) {
// Dynamisches Skalieren von Schriften
fontSize = function(){
//ww = $(window).innerWidth();
ww = $('.mainhead').innerWidth(); // Width of the Motherelement
one = ww/100; // 1%
multiplcator = one*31;
$('.mainhead').css({'font-size': multiplcator+'px'});
}
fontSize();
$(window).resize(function() {
fontSize();
});
});
Когда вы теперь устанавливаете свой Fontsize через css, он разыгрывается во всех браузерах, таких как charm
.mainhead{
width:48%;
font: normal 2em Times, Verdana, sans-serif;
}
Я знаю, что на это уже был дан ответ, но мне нужно поделиться этим на будущее comers, потому что мне потребовались несколько минут, чтобы понять это.
Так как mr @random сказал: em как единица, сделает трюк.
Если вы хотите, чтобы ваша страница масштабировалась вверх и вниз и сохраняла какую-то масштабную шкалу для себя, ящики и шрифт, а затем устанавливая его в em, будут в порядке.
Этот метод позволит масштабировать шрифты и прямоугольники страницы, чтобы они росли с относительным размером друг с другом и, надеюсь, не имели бы вещей, выходящих за границы и границы.
Инициализируйте свой body с помощью 1em как font-size, что означает 100%
body {
font-size: 1em;
}
Затем установите свой элемент font-size в процентах от его родительского
.your_element {
font-size:0.4em /* for example 40% if its parent font-size */
}
Теперь magic из @media запросов
@media all and (max-width: 767px) {
body {
font-size: 0.4em !important;
}
}
@media all and (min-width: 768px) and (max-width: 1023px) {
body {
font-size: 0.6em !important;
}
}
@media all and (min-width: 1024px) and (max-width: 1199px) {
body {
font-size: 0.8em !important;
}
}
@media all and (min-width: 1200px) and (max-width: 1599px) {
body {
font-size: 1em !important;
}
}
@media all and (min-width: 1600px) and (max-width: 1999px) {
body {
font-size: 1.2em !important;
}
}
@media all and (min-width: 2000px) and (max-width: 2999px) {
body {
font-size: 1.6em !important;
}
}
@media all and (min-width: 3000px) and (max-width: 3999px) {
body {
font-size: 1.8em !important;
}
}
@media all and (min-width: 4000px) {
body {
font-size: 2em !important;
}
}
И Бинго, хорошо провести день.
Когда вы говорите "относительно размера страницы", что именно вы имеете в виду "размер страницы"?
В окне браузера? Тогда ваши шрифты изменили бы размер, когда пользователь изменит размер окна - определенно не то, что можно было бы ожидать, и очень плохо для удобства использования. Люди не изменяют размер окон, чтобы увидеть большее или меньшее изображение всего сайта, они увеличивают их, чтобы увидеть большую часть сайта, и сделать окна меньше, чтобы увидеть конкретный небольшой раздел и иметь место для других окон рядом с браузером.
Если вы имеете в виду размер экрана, это еще хуже, потому что это будет означать огромные шрифты на экране 30 дюймов. Но люди не покупают 30-дюймовые экраны, чтобы они могли видеть огромные шрифты, они покупали их, чтобы увидеть несколько окон бок о бок.
В целом, использование em или что-то similay - единственный разумный способ сделать масштабируемый веб-сайт, поскольку он будет масштабироваться относительно размера по умолчанию, который должен/должен быть относительно того, что пользователь может с комфортом читать.