Позвольте пользователям изменять размер шрифта на веб-странице
Может быть не связано, но может кому-то помочь .... в Laravel просто dd (config ('app.env')); и вы увидите «местный» или «производство»
4 ответа
Подход, который я бы выбрал, заключается в применении процентного отношения размера шрифта к тегу body html
body
{
font-size: 62.5%;
}
Затем для всех других элементов укажите размер шрифта в ems, который генерирует размер как увеличенный процент от унаследованного font-size
h1
{
font-size: 1.8em;
}
p
{
font-size: 1.2em;
}
. Я использую 62,5% для body, потому что это легко перевести в размеры в пикселях при указании других размеров шрифта, например, 1.2em = 12px, 1.8em = 18px и так далее
Чтобы затем программно изменить размер шрифта на странице, вам просто нужно изменить значение font-size в теле, и остальная часть страницы будет соответственно увеличиваться или уменьшаться
Вы можете проверить это, имея три div
<div id="sizeUp">bigger text</div>
<div id="normal">normal text</div>
<div id="sizeDown">smaller text</div>
В JQuery я считаю, что вы можете сделать
$(document).ready(function() {
$("#sizeUp").click(function() {
$("body").css("font-size","70%");
});
$("#normal").click(function() {
$("body").css("font-size","62.5%");
})
$("#sizeDown").click(function() {
$("body").css("font-size","55%");
})
});
Самый простой способ изменить размер текста - с помощью CSS. Если у вас есть доступ к файлу css, вы можете изменить размер всего текста на странице следующим образом:
* {
font-size: 110%;
}
Добавьте его в начало файла styles.css, это повлияет на весь текст на странице и весь текст, который используйте файл styles.css.
Просто измените размер шрифта с помощью CTRL- + и CTRL- (в Firefox, в других браузерах может быть иначе)
Попробуйте следующее:
<p><a href="#" onclick="document.body.style.fontSize='x-small';">SMALL</a></p>
<p><a href="#" onclick="document.body.style.fontSize='medium';">MEDIUM</a></p>
<p><a href="#" onclick="document.body.style.fontSize='x-large';">BIG</a></p>