Я пытаюсь масштабировать некоторые шрифты для адаптивного баннера на моей странице, и нашел и изменил некоторый код, который я нашел в Интернете для этих целей.В основном это две части:
На планшетах, ноутбуках и настольных (или внешних) мониторах приличного размера я буду использовать горизонтальный баннер вверху - это работает.
На небольших планшетах и телефонах я хочу использовать вертикальный баннер с левой стороны - это не работает.
========== HTML ==========
Структура HTML в основном такая (некоторые строки изменены для защиты невинных; -)):
<body>
<section id="page">
<section id="header">
<div id="logo"><img src="./Images/site/logo.png" alt="record" height="195px" width="195px"/></div>
<div id="h_banner">
<img id="ban_img_left" src="./Images/site/lt.png"/>
<div id="banner_h">
<div class="banner_string flexFontH"><u>Mumble</u> <img src="./Images/site/And.png" height="200px"/> <u>Grumble</u></div>
</div>
<img id="ban_img_right" src="./Images/site/rb.png"/>
</div><!-- h_banner -->
<div id="v_banner">
<img id="ban_img_top" src="./Images/site/lt.png"/>
<div id="banner_v">
<div class="banner_string flexFontV">M<br/>u<br/>m<br/>b<br/>l<br/>e<br/>
<img src="./Images/site/And.png" height="80px"/>
<br/>G<br/>r<br/>u<br/>m<br/>b<br/>l<br/>e<br/></div>
</div>
<img id="ban_img_bottom" src="./Images/site/rb.png"/>
</div><!-- v_banner -->
</section><!-- header -->
...
<div id="TestFontSize" class="banner_string">WWWWWWWWWWWWWWWW</div>
========== CSS ==========
Код CSS основан на сетке (пропущен, некоторые нештуки, такие как col:
#page {
display: grid;
grid-template-columns: 80px 120px auto 200px;
grid-template-rows: 200px auto 200px;
}
#header {
grid-column: 1/5; grid-row: 1/2;
display: grid;
grid-template-columns: 200px auto 200px;
grid-template-rows: 200px;
position: relative;
}
#logo {grid-column: 1/3; grid-row: 1/2; position: fixed;}
#banner_h {grid-column: 1/5; grid-row: 1/2;}
#h_banner {grid-column: 1/5;}
#ban_img_left {grid-column: 1/3; position: absolute; height: 200px; left: 10px;}
#ban_img_right{gird-column: 4/5; position: absolute; height: 200px; right: 10px;}
#banner_v {
grid-column: 1/2; grid-row: 1/4;
display: grid;
grid-template-columns: auto;
grid-template-rows: 80px auto 80px;
}
#v_banner {grid-row: 2/3; display: none;}
#ban_img_top {grid-row: 1/2; display: none; position: fixed; width: 80px; top: 10px;}
#ban_img_bottom {grid-row: 3/4; display: none; position: fixed; width: 80px; bottom: 10px;}
.banner_string {
position:absolute; height: 200px; width: 100%;
display: flex; justify-content: center; align-items: center;
/*font-family: HaarlemDecoDEMO; letter-spacing: 10px;*/
font-family: Jazz-let; letter-spacing: 5px;
color: #83AFE4;
}
@media only screen and (max-width: 1000px) { /* [small-ish] iPhones */
#page {grid-template-columns: 80px auto; grid-template-rows: auto;}
#header {grid-template-columns: auto; grid-template-rows: auto;}
#logo {display: none;}
#banner_h {display: none;}
#h_banner {display: none;}
#ban_img_left {display: none;}
#ban_img_right {display: none;}
#banner_v {display: grid; width: 80px; height: 100%; position: fixed;}
#v_banner {display: block;}
#ban_img_top {display: block;}
#ban_img_bottom {display: block;}
.banner_string {
display: inline; width: 80px; height: 100%; position: fixed; display: block;
transform: translate(25px, 0px);
}
}
========== JS ==========
Javascriptвот где вступает в действие адаптивный аспект масштабирования шрифта на баннере. Я признаю, что некоторые из чисел, которые я использовал, были взяты из метода проб и ошибок, чтобы найти что-то, что, казалось бы, работает, поэтому возьмите это с собой хоть немногосоли.
flexFont = function() {
var len = "Mumble & Grumble".length;
/* (1) horizontal banner */
var hBanner = $(".flexFontH");
var hBannerWidth = $(hBanner).width();
var hBannerHeight = $(hBanner).height();
if (hBannerHeight > 0) {
var fontSize = 2 * (hBannerWidth - (2 * hBannerHeight)) / len; /* Jazz-let */
if (fontSize > 154) { fontSize = 154; } /* max that fits within 200px height for Jazz-let */
$(hBanner).css("fontSize", fontSize+"px");
}
/* (2) vertical banner */
var vBanner = $(".flexFontV");
var vBannerWidth = $(vBanner).width();
var vBannerHeight = $(vBanner).height();
if (vBannerWidth > 0) {
var fontSize = 1.125 * (vBannerHeight - (2 * vBannerWidth)) / len;
var lineHeight = (fontSize - 5) + "px";
var test = document.getElementById("TestFontSize");
test.style.fontSize = fontSize+"px";
var stringWidth = (test.clientWidth + 1);
var paddingTop = ((vBannerHeight - stringWidth) / 2) + "px";
var h = (vBannerHeight - 160) + "px";
$(vBanner).css({"fontSize": fontSize+"px", "height": h, "padding-top": paddingTop, "line-height": lineHeight});
}
}
window.onload = function(event) {
flexFont();
}
window.onresize = function(event) {
flexFont();
}
========== ПРОБЛЕМА ==========
Когда я изменяю размер окна, когда оно становится достаточно широким, чтобы использовать горизонтальный баннер - все работает так, как я хочу, шрифт в баннере увеличивается / уменьшается по мере увеличения / уменьшения ширины окна.
Когда я изменяю размер окна, когда оно достаточно узкое, чтобы использовать вертикальный баннер - текст исчезает при первом перерисовывании.Если я обновляю страницу, она появляется, но затем, если я изменяю размер окна (уже, выше, короче), оно снова исчезает - и, очевидно, проблема в том, что $ (vBanner) .height () становится «0», и поэтому все вычисления основанына это значение также '0'.
Это на моем ноутбуке пытается симулировать изменение размера экрана.На моем телефоне все по большей части одно и то же: когда я впервые отображаю страницу, вертикальный баннер выглядит нормально, но затем, если я меняю ориентацию на / из альбомной / портретной ориентации - снова текст исчезает.
Итак - кто-нибудь может выяснить, почему это может иметь место?и - что более важно, что я мог бы сделать, чтобы это исправить?