Question

我正在尝试为页面上的响应式横幅缩放一些字体，并找到并修改了一些在网上找到的用于这些目的的代码。基本上有两个部分：

在尺寸合适的平板电脑，笔记本电脑和台式机（或外部）上显示器，我将在顶部使用水平横幅-可以。
在较小的平板电脑和手机上，我想在左侧-这不起作用。

========== 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”。

那是在我的笔记本电脑上试图模拟屏幕尺寸的变化。在我的手机上，它仍然几乎是一样的：当我第一次渲染页面时，垂直横幅看起来很好，但是如果我将方向更改为横向/纵向-文字再次消失。

那么-有人能弄清楚为什么会这样吗？而且-更重要的是，我可能能够解决该问题？

Answer 1

我试图通过粘贴粘贴代码并导入自己的占位符图像来重新创建您的问题。如果您可以使用展示问题的jsfiddle更新您的问题，将非常有帮助。

似乎每次调用flexFont时，它都会将内容收缩很多，直到达到最小值为止。

在CSS中设置高度时，垂直横幅代码会产生问题。如果不理会高度设置，它似乎会更适当地起作用：

$(vBanner).css({"fontSize": fontSize+"px", /*"height": h,*/ "padding-top": paddingTop, "line-height": lineHeight});

尝试一下，看看它是否有助于您实现目标。如果不是，请更新您的问题以提供jsfiddle以及您需要的更多信息。

Answer 2

您可以简化很多。您无需为此进行JavaScript或媒体查询，可以使用视口单元。 vw代表视口宽度，vh代表视口高度。这些对于字体非常有价值，因为它们基于视口的宽度或高度，视口是用户在网页上的可见区域（根据调整大小和设备而变化）

font-size: 5vw;

^视口宽度的5％。这是一个 jsFiddle，以便您可以看到它的运行情况

自适应设计出了问题

2 个答案: