изменение размера шрифта с помощью JavaScript на адаптивном веб-сайте - PullRequest
Новая
       57

изменение размера шрифта с помощью JavaScript на адаптивном веб-сайте

0 голосов
/ 07 декабря 2018

Я делаю адаптивную страницу с начальной загрузкой.В середине экрана у меня есть текст: 

<p id="entershop" ><a class=no-deco  href="shop.html">enter shop</a></p>

Страница использует загрузчик, поэтому p находится внутри div, который имеет определенный размер.Я сделал скрипт, который создает эффект, что р становится все больше и меньше.P имеет размер 7rem, и с помощью этого сценария он увеличивается от 7 до 10: 

var time = 100;
var up = true;
var size = 7.0;
var getbiggersmaller  = function () {
var text = document.getElementById("entershop");


if (size > 9.5){
    up = false;
}
if (size< 7){
    up = true;
}
if (up){
    size+= 0.1;
    text.style.fontSize = size.toString() +"rem";
   // console.log(size.toString() +"rem");
}

if (up == false){
    size-= 0.1;
    text.style.fontSize = size.toString() +"rem";
   // console.log(size.toString() +"rem");
}


}

window.onload = function() {

setInterval(getbiggersmaller,time);
};

На моем мониторе 16:10 он отлично смотрится, но когда я изменяю размер окна, шрифт становится слишком большим.Мне нужен расчет / скрипт, который делает величину, на которую размер увеличивается / уменьшается, а исходный размер шрифта и т. Д. Зависит от размера экрана.Поскольку я начинающий, я не знаю, с чего начать: (

1 Ответ

0 голосов
/ 07 декабря 2018

Я бы настоятельно рекомендовал использовать медиа-запрос вместо javascript.Но если вы склонны использовать javascript, я бы посоветовал вам использовать единицу «пиксель» вместо «rem», потому что пиксель остается постоянным, а значение не меняется.Хотя rem изменяется в соответствии с дизайном сайта и переводится в пиксели после этого расчета. Что может варьироваться в зависимости от ситуации. Также я думаю, что вы забыли поставить кавычки вокруг имени класса.Медиа-запрос - это метод CSS, используемый для создания адаптивных веб-сайтов. Используя медиа-запросы, вы можете управлять поведением ваших элементов на экранах разных размеров. ссылка на учебник по базовым медиа-запросам Например

html 

<p id="entershop" ><a class="no-deco"  href="shop.html">enter shop</a></p>

css: 

@media only and screen(min-width:1200px) {
    .a.no-deco {
        font-size:9.5rem;
    }
}
@media only screen and (min-width: 992px) {
    .a.no-deco {
        font-size:8rem;
    }    
}

... и т. Д.

...