动态地调整HTML Widget的大小

-1

我试图让我的HTML Widget能够响应并调整浏览器的大小。下面是HTML：动态地调整HTML Widget的大小

<nav class="navigation"> 
    <ul class="menu"> 
     <li class="menu__item"> 
      <a href="" class="menu__link" target="_blank"> 
       <span class="menu__title"> 
        <span class="menu__first-word" data-hover="Executive"> 
         Executive 
        </span> 
        <span class="menu__second-word" data-hover="Summary"> 
         Summary 
        </span> 
       </span> 
      </a> 
     </li> 

     <li class="menu__item"> 
      <a " class="menu__link" target="_blank"> 
       <span class="menu__title"> 
        <span class="menu__first-word" data-hover="Display"> 
         Display 
        </span> 
        <span class="menu__second-word" data-hover="Summary"> 
         Summary 
        </span> 
       </span> 
      </a> 
     </li> 

     <li class="menu__item"> 
      <a href="" class="menu__link" target="_blank"> 
       <span class="menu__title"> 
        <span class="menu__first-word" data-hover="Facebook"> 
         Facebook 
        </span> 
        <span class="menu__second-word" data-hover="Summary"> 
         Summary 
        </span> 
       </span> 
      </a> 
     </li> 

     <li class="menu__item"> 
      <a href="" class="menu__link" target="_blank"> 
       <span class="menu__title"> 
        <span class="menu__first-word" data-hover="LinkedIn"> 
         LinkedIn 
        </span> 
        <span class="menu__second-word" data-hover="Summary"> 
         Summary 
        </span> 
       </span> 
      </a> 
     </li> 

     <li class="menu__item"> 
      <a href="" class="menu__link" target="_blank"> 
       <span class="menu__title"> 
        <span class="menu__first-word" data-hover="Search"> 
         Search 
        </span> 
        <span class="menu__second-word" data-hover="Summary"> 
         Summary 
        </span> 
       </span> 
      </a> 
     </li> 
       <li class="menu__item"> 
      <a href="" class="menu__link" target="_blank"> 
       <span class="menu__title"> 
        <span class="menu__first-word" data-hover="Google"> 
         Google 
        </span> 
        <span class="menu__second-word" data-hover="Analytics"> 
         Analytics 
        </span> 
       </span> 
      </a> 
     </li> 
    </ul> 
</nav>

这里是CSS：

body { 
     display: flex; 
     align-items: center; 
     height: ; 
     background: #FFF; 
    } 

    a { 
     outline: 0; 
     text-decoration: none; 
    } 

    .navigation { 
     width: 100%; 
     border-bottom: 3px solid #000; 
     font-family: 'Pathway Gothic One', sans-serif; 
     font-size: 22px; 
    } 

    .menu { 
     display: flex; 
     justify-content: center; 
     max-width: 1150px; 
     margin: 0 auto; 
     padding-left: 0; 
    } 

    .menu__item { 
     display: inline-block; 
     white-space: nowrap; 
    } 
    @media screen and (max-width: 480px) { 
     .menu__item:nth-child(n + 3) { 
     display: none; 
     } 
     .menu__item:nth-child(2) .menu__link { 
     border-right: 0; 
     } 
    } 
    @media screen and (max-width: 768px) { 
     .menu__item:nth-child(n + 4) { 
     display: none; 
     } 
     .menu__item:nth-child(3) .menu__link { 
     border-right: 0; 
     } 
    } 
    @media screen and (max-width: 992px) { 
     .menu__item:nth-child(n + 5) { 
     display: none; 
     } 
     .menu__item:nth-child(4) .menu__link { 
     border-right: 0; 
     } 
    } 
    .menu__item:last-child .menu__link { 
     border-right: 0; 
    } 

    .menu__link { 
     display: block; 
     padding: 6px 30px 3px; 
     border-right: 2px dotted #ccd7d7; 
    } 
    .menu__link:hover .menu__first-word, .menu__link:focus .menu__first-word { 
     transform: translate3d(0, -105%, 0); 
    } 
    .menu__link:hover .menu__second-word, .menu__link:focus .menu__second-word { 
     transform: translate3d(0, 105%, 0); 
    } 
    @media screen and (min-width: 768px) { 
     .menu__link { 
     padding: 6px 40px 3px; 
     } 
    } 

    .menu__title { 
     display: inline-block; 
     overflow: hidden; 
    } 

    .menu__first-word, 
    .menu__second-word { 
     display: inline-block; 
     position: relative; 
     transition: transform .3s; 
    } 
    .menu__first-word::before, 
    .menu__second-word::before { 
     position: absolute; 
     content: attr(data-hover); 
    } 

    .menu__first-word { 
     color: #000000; 
    } 
    .menu__first-word::before { 
     top: 105%; 
     color: #000000; 
    } 

    .menu__second-word { 
     color: #F37421; 
    } 
    .menu__second-word::before { 
     bottom: 105%; 
     color: #F37421; 
    }

的最佳方法，请咨询来调整这使它的动态。现在我已经通过HTML删除了URL引用。

如果您有任何问题，请让我知道。

谢谢，

来源

2017-09-13 Nakul B.

你必须定义媒体查询，删除一些填充和/或较小的字体“大小 –

_”如果您有任何问题，请让我知道。“_ - 同样。如果你还不能提出一个实际的问题，那么请阅读[问]。 – CBroe

@Cbroe这是一个非常有用的评论。谢谢。 –

HTML不作出响应，它是用来构造你的页面。 CSS用于“设计”它。我会添加一个JavaScript脚本来动态调整元素的大小！

如果你不习惯JavaScript，不用担心，这很容易开始。

下面是一些有用的文档：

希望有所帮助;）

来源

2017-09-13 20:59:21 ZyriabDsgn

感谢这@ZyriabDsgn，我会通读并进行调整！ –

@NakulB。不客气，我不是网络开发人员，所以可能有其他方式来执行此操作。如果我的帖子为您提供了解决方案，请将其标记为帮助解答或其他内容，那些经过相同问题的人会轻松找到您的帖子并标记为“已解决”。如果您找到了另一种方式，仍然可以将您的问题标记为“已解决”并分享您的解决方案;） – ZyriabDsgn

动态地调整HTML Widget的大小

回答

相关问题