Как я масштабирую шрифт каждого элемента с данным классом, реалистичным к его родительским измерениям, используя javascript? - PullRequest
Новая
       43

Как я масштабирую шрифт каждого элемента с данным классом, реалистичным к его родительским измерениям, используя javascript?

0 голосов
/ 22 сентября 2019

Я пытаюсь сделать свой первый адаптивный веб-сайт, и у меня возникли некоторые проблемы.

В частности, мне нужно, чтобы текст был центрирован, но когда я пробую окна разных размеров в режиме Responsive Designв FireFox Dev Edition текст, который центрирован, действительно не помещается в свой контейнер должным образомИтак, я подумал, что JavaScript, вероятно, будет лучшим способом действий.

Хотя это работает для элементов, выбранных с помощью document.getElementById('id');, я не могу заставить его работать с классами с помощью forloop.

Вот код, который я использую для элементов с идентификатором: 

document.getElementById('header-text').style.fontSize = ((19/47.73) * document.getElementById('header-title').getBoundingClientRect().height).toString().concat('px');

Вот то, что я пытался использовать с элементами, использующими общий класс. 

var allIconLinks = document.getElementsByClassName('extras-iconlink-text');
var i;
for ( i = 0; i > allIconLinks.length; i++ ) {
    allIconLinks[i].style.fontSize = (19.2/42.43) * allIconLinks[i].parentElement.getBoundingClientRect().height.toString().concat('px');
}

Стоит отметить, что внутри цикла for вообще ничего не выполняется, я попытался использовать функцию console.log и ничего не регистрировалось.

Если это полезно, вот HTML & CSS элементов (яя не показывал в этом фрагменте, но у меня есть <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />): 

<body>
 <div id = 'header'>
  <div id = 'header-title'>
   <span id = 'header-icons'>
    <img id = 'icon-layer1' src = '../../assets/logos/layer1.svg'>
    <img id = 'icon-layer2' src = '../../assets/logos/layer2.svg'>
   </span>
   <span id = 'header-text'>Karakaras Portfolio</span>
  </div>
   <div id = 'header-extras'>
    <span id = 'extras-info' class = 'extras-iconlink'>
     <img id = 'icon-info' src = '../../assets/icons/info.svg'>
     <span class = 'extras-iconlink-text'>About</span>
    </span>
    <span id = 'extras-projects' class = 'extras-iconlink'>
     <img id = 'icon-info' src = '../../assets/icons/projects.svg'>
     <span class = 'extras-iconlink-text'>Dev projects</span>
    </span>
   </div>
 </div>
</body>

#header {
 top: 0%;
 left: 0%;
 width: 100%;
 height: 7.5%;
 background-color: #7161ef;
 position: fixed;
}
#header #header-title {
 top: 5%;
 left: 0.15%;
 width: 20%;
 height: 90%;
 background-color: transparent;
 position: absolute;
}
#header #header-title #header-text {
 display: flex;
 top: 5%;
 left: 25%;
 width: 80%;
 height: 90%;
 justify-content: center;
 flex-direction: column;
 background-color: inherit;
 white-space: nowrap;
 position: absolute;
 font-family: 'comfortaabold';
 font-size: 120%;
}
#header #header-extras {
 top: 5%;
 left: 22.65%;
 width: 77.25%;
 height: 90%;
 background-color: transparent;
 position: absolute;
}
#header #header-extras .extras-iconlink {
 display: inline-block;
 top: 10%;
 width: 4%;
 height: 80%;
 background-color: inherit;
 position: absolute;
}
#header #header-extras .extras-iconlink .extras-iconlink-text {
 display: flex;
 top: 0%;
 left: 100%;
 width: 250%;
 height: 100%;
 justify-content: center;
 flex-direction: column;
 background-color: inherit;
 white-space: nowrap;
 position: absolute;
 font-family: 'comfortaabold';
 font-size: 120%;
}

Я уверен, что ошибка, которую я совершаю, очень глупа и очевидна, я на самом деле не занимаюсь веб-разработкоймного, я в основном делаю gamedev с Lua.

Вся помощь очень ценится!

Ответы [ 2 ]

0 голосов
/ 22 сентября 2019

Вы можете установить размер шрифта в зависимости от размера окна.Например, чтобы установить размер шрифта 20 пикселей на всех экранах ниже 600 пикселей, вы должны использовать этот CSS: 

@media (max-width: 600px) {
#header {
    font-size: 20px;
}}
0 голосов
/ 22 сентября 2019

Возможно, вам не нужно использовать JavaScript для центрирования.В основном это проблема презентации, хорошо решаемая CSS.Я рекомендую вам перейти по этим двум ссылкам и посмотреть, что вы можете использовать в каждом случае, в зависимости от того, что именно вам нужно центрировать.Не долго читать.

выравнивание текста

Центрирование в CSS: полное руководство

...