响应的网页，以媒体查询

-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

响应的网页，以媒体查询

回答

相关问题