Я делаю сайт с html5 и css. Я пытаюсь сделать этот сайт отзывчивым, но я не знаю, почему размер шрифта остается неизменным при изменении размера окна браузера, даже когда я использую em или percentage, например: font-size: XXem или font-size: XX%.
Как изменить размер шрифта?
Для веб-страниц HTML5 я настоятельно рекомендую использовать значения ширины и высоты точки. Они функционируют аналогично%, но имеют размер шрифта, размер которого изменяется с помощью окна.
Например...
.some-paragraph{
font-size: 5vw;
}
Это установило бы размер шрифта всегда на 5% от текущей ширины видового экрана, даже при повторной калибровке!
Подробнее здесь: http://www.w3.org/TR/css3-values/#viewport-relative-lengths
Примечание. Возможно, вам нужно иметь это в своей голове:
<meta name="viewport" content="initial-scale=1">
Он называется Отзывчивый
@media screen and (max-width: 1024px) {
your font style goes here
}
@media screen and (max-width: 950px) {
your font style goes here
}
@media screen and (max-width: 650px) {
your font style goes here
}
@media screen and (max-width: 480px) {
your font style goes here
}
Проверьте свои медиа-запросы, они должны контролировать размер шрифта, если вы используете отзывчивые методы.
Пример кода поможет.
Сделайте снимок. Работает лучше, чем% или em.
Вы должны определенно использовать мультимедийные запросы CSS в стиле, основанном на диапазоне коэффициентов экрана и спецификаций, но здесь приведен пример использования как rem единиц, так и jQuery, чтобы уменьшить размер шрифта при изменении размера браузера. Заклинание здесь.
CSS
html { font-size: 90.5%; }
body { font-size: 1.4rem;}
h1 { font-size: 2.4rem; }
JavaScript/JQuery
$(document).ready(function () {
var holdWidth = $(window).width();
$(window).on('resize', function () {
newPercentage = (($(window).width() / holdWidth) * 100) + "%";
$("html").css("font-size", newPercentage)
});
});
и здесь пример, усредняющий как ширину, так и высоту для нового процентного размера шрифта:
$(document).ready(function () {
var holdWidth = $(window).width();
var holdHeight = $(window).height();
var holdAverageSize = (holdWidth + holdHeight) / 2;
$(window).on('resize', function () {
newAverageSize = ($(window).width() + $(window).height()) / 2;
newPercentage = ((newAverageSize / holdAverageSize) * 100) + "%";
$("html").css("font-size", newPercentage)
console.log(newPercentage);
});
});
вы можете исправить это, используя запрос @media и окно просмотра в своем css, и добавьте этот метатег в свой html:
<meta name="viewport" content="width=device-width,initial-scale = 1.0,maximum-scale = 1.0">
а с помощью запроса и просмотра @media вы объявляете, какой размер у вас есть на ширине экрана, используя этот медиа-запрос + viewport в css:
@media screen and (min-width: 820px) and (max-width: 920px) {
@viewport { width: 820px; }
// your css for screens between 820 and 920 pixels in width goes here
}
i в основном используют значение: от 20 до 600, 600-700, 700-820, 820 - 920, 920 - 1200, экран @media и (минимальная ширина: 1200 пикселей) {@viewport {width: 1200px; } (этот последний установит размер для любого экрана шириной более 1200 пикселей, поэтому ваш код для самой большой версии будет идти здесь}
Итак, это означает, что у вас будет 6-кратный код, который будет адаптирован к размеру.
Это называется адаптивным или отзывчивым дизайном и довольно легко сделать
Для получения дополнительной информации вы можете проверить это http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
ОК... Я думаю, это старый вопрос... но здесь крутая работа вокруг меня натолкнулась. этот парень CSS корректирует размер текста в соответствии с размером окна, но сохраняет его достаточно большим для обеспечения совместимости с мобильными устройствами http://typecast.com/blog/a-more-modern-scale-for-web-typography
Как вы определяете свой базовый размер шрифта (против ваших тегов html или body в вашем файле CSS)? Если вы установите это значение на пиксель (или другую фиксированную меру) или наследуете размер шрифта браузера по умолчанию, ваши проценты или значения em всегда будут составлять процент от этих значений по умолчанию.
Наиболее распространенный подход к созданию сайтов с реагированием - это сделать "первый мобильный" подход, при котором ваша таблица стилей по умолчанию обрабатывает базовый стиль для вашего сайта на небольшом экране, а затем использует мультимедийные запросы в CSS для настройки стилей в качестве размера экрана увеличивается. Используете ли вы какие-либо медиа-запросы/контрольные точки в настоящее время?
.text {
font-size: 50px;
}
@media only screen
and (min-width : 300px)
and (max-width : 500px) {
.text {
font-size: 20px;
}
}
@media only screen
and (min-width : 500px)
and (max-width : 800px) {
.text {
font-size: 30px;
}
}
</style>
<div class="text">Test Text</div>
font-size: 25vmin;
Это был очень хороший размер шрифта как по высоте, так и по ширине.
Вам не нужно ничего в голове.