响应式设计出错了答案

【问题标题】：Responsive design gone awry响应式设计出错了
【发布时间】：2018-10-02 09:35:39
【问题描述】：

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

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

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

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

那么 - 任何人都可以弄清楚为什么会这样吗？而且 - 更重要的是，我可以做些什么来解决它？

【问题讨论】：

标签： javascript html css responsive-design

【解决方案1】：

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

font-size: 5vw;

^ 5% 的视口宽度。这是一个 jsFiddle 这样你就可以看到它的实际应用了

【讨论】：

啊——我以前见过提到视口，但实际上并不了解它是如何使用的。这非常有启发性，一旦我尝试在我的项目中使用这个概念，我可能会将其标记为答案。非常感谢！
我想我这样做fiddle thing 是正确的。结果似乎是我正在寻找的，现在我将尝试用它来改进我的实际代码 - 再次感谢！
没问题！很高兴你解决了这个问题并在这个过程中学到了一些东西:-)

【解决方案2】：

我尝试通过复制粘贴代码和导入我自己的占位符图像来重现您的问题。如果您可以使用演示您的问题的 jsfiddle 更新您的问题，这将非常有帮助。

似乎每次调用 flexFont 时，它都会大幅缩小内容，直到达到最小值。

在 CSS 中设置高度时，垂直横幅代码会产生问题。如果您不考虑高度设置，它的功能似乎更合适：

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

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

【讨论】：

我在添加高度设置时也注意到了这个问题（抱歉，忘了提及），这是为了解决垂直横幅似乎没有在网格行中居中的问题我想要它。我还需要探索这个小提琴的东西（我已经多次看到它，但从未真正使用过它）我会记住它以备将来的问题 - 谢谢