響應的網頁，以媒體查詢

-1

https://calm-wildwood-83211.herokuapp.com/響應的網頁，以媒體查詢

如果您在開發工具看，或加載網站上的iPhone，它不是敏感。它笨拙地適合比筆記本電腦小的各種屏幕尺寸。我正在使用Bootstrap Vitality模板。在我HTML<head>，我有這樣的代碼：

我應該如何去製作這個網站響應媒體查詢？

2016-01-28 Michael Chepesiuk

歡迎來到StackOverflow。請訪問[幫助]並閱讀[問]。你的問題是脫離主題，因爲你正在要求一個關於響應式設計的教程。這太寬泛了（有關於這個主題的整本書），你的第一步應該是做你自己的研究來找到網上已經提供的教程資料。響應式設計並不容易，我不確定你期待什麼樣的答案。 X並沒有涉及到大量的學習和工作，當然沒有「X會做出反應」。 –

聯繫人部分中的電子郵件沒有任何中斷（因爲它是電子郵件），因此其佔用的自然寬度比手機屏幕寬。如果您在手機屏幕上編寫查詢以使該部分中的h2大約爲17px，那麼您應該很好！

來源

2016-01-28 18:56:57

你的問題就在這裏開始於行438：

<section id="contact"> 
    <div class="container wow fadeIn"> 
     <div class="row"> 
      <div class="col-lg-12 text-center"> 
       <h2>Contact Kingsway Custom Homes</h2> 
        <hr class="colored"> 
        <p>Please tell us about your plans.</p> 

        <a href="mailto:[email protected]"><h2>[email protected]</h2></a> 

       </div> 
      </div> 
      ......... 
</section>

這裏<a>更是打破了佈局。我在<div class="col-lg-12 text-center">上放了一個簡單的style="overflow:hidden"，它解決了網站'響應性問題'，雖然這只是隱藏了大部分電子郵件地址。

您需要考慮以較小的屏幕尺寸調整此元素文本的大小。

來源

2016-01-28 19:04:44

響應的網頁，以媒體查詢

回答

相關問題