【问题标题】:need help making website responsive需要帮助使网站响应
【发布时间】:2016-12-21 08:21:35
【问题描述】:

大家!我目前正在为我的一个朋友做一些免费的工作,为我的作品集做出贡献并让我继续学习。

一切都很好,看起来很棒,但不幸的是,我在尝试使某些内容具有响应性时遇到了很多麻烦。我正在使用 Bootstrap 网格框架。

好的,这是我的背景 CSS,它也需要响应式。

.boxmain {
  background-color: white;
  width: 100%;
  height: 400px;
  background-size: cover;
  max-width: 100%

}

这是我创建的一个白色框,有点像覆盖我的主背景图像的子背景。

}
.video {
  padding-top: 30px;
}
.underh {
  font-family: 'Oxygen', sans-serif;
  font-weight: 100;
  font-size: 22px;
  padding-top: 33px;
  margin-left: 20px;
  max-width: 100%;
}

这是框内内容的 CSS,它是一个段落和嵌入的 Facebook 视频。

<div class="boxmain">
            <div class="container-fluid">
               <div class="row">
                  <div class="col-xs-6">
                     <div class="video">
                     </div>
                     <iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Feyeofthestormpro%2Fvideos%2F638067739703491%2F&show_text=0&width=560" width="560" height="315" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>
                   </div>
                  </div>
                  <div class="col-xs-6">
                     <p class="underh">Eye of the Storm Productions is an entertainment business dedicated to its involvement in the electronic music scene.
                        We offer a large range of services to  the underground electronic music scene and pride ourselves on the work that we do.
                        We offer our own selection of the best aspiring young DJs/Producers and photographers/cinematographers, as well as professionally run stage management solutions.
                        We have also partnered with Fulcrum Designs and Staging, to bring you the best in stage design and construction.  Including custom shade sail installation and VJ services.
                     </p>
                  </div>
               </div>
             </div>
            </div>
         </div>
         </div>

这就是 HTML。 我想学习如何使这个移动友好/响应式谢谢!

【问题讨论】:

  • 这不是完整的 html 对吗?我敢打赌这是你的第一篇文章。
  • 我只放了必要的东西?
  • 首先,我看到你的代码是自举的,它应该是响应式的。我认为你在 html 头或脚本中遗漏了一些东西。

标签: html css twitter-bootstrap mobile


【解决方案1】:

如果您使用 % 而不是 px,您会发现网站的响应速度更快

这可能会有所帮助:http://www.w3schools.com/tags/ref_pxtoemconversion.asp

发布更多代码会有所帮助*

【讨论】:

  • 同意。百分比很好,根据无响应的方式,@media 规则通常很有用。检查出来。让我们知道它反应迟钝的原因,我们可以为您提供更多...
  • 我用 CSS 而不是 CSS3 回答,我对 @media 规则没有太多经验
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2021-03-30
  • 2017-06-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多