動態地調整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的大小

回答

相關問題