Question

我很快就发布了游戏，这是我第一次制作网页。它在台式机和笔记本电脑上看起来不错，但是我的手机上的位置和尺寸也没有显示出来。

这是一个移动屏幕截图。视频大小有点小。与上述内容相比，联系人/电子邮件/社交媒体图像的比例过大。我也不喜欢一切都如此狭窄，适合一个视图，消除了滚动。

使用Chrome，Mac Air上的页面也存在问题。社交媒体链接不会显示在底部。这是Chrome上的底部。当我通过打开html文件在我的机器上本地查看页面时，只有当我访问我的网站时，才会出现此问题。

编辑：根据建议，这里是我的html / css文件的内容，而不是要求人们查看页面源。非常感谢能帮助我完成任何这些事情的人！

HTML：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Risky Bee</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
    <img src="WebBG1a.jpg" style="display:none;"> 
  <body>

    <div class="container-fluid">

      <div class="row">
        <img src=WebTrio3c.png class="img-responsive center-block">
      </div>

      <div class="row">
        <img src=WebJuly21c.png class="img-responsive center-block" id="mar40">
      </div>

      <div class ="row" id="mar40">
        <div class="col-xs-8 col-xs-offset-2">
          <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/FjtfCwNj8yU?rel=0" allowfullscreen></iframe>
          </div>
        </div>
      </div>

      <div class="row">
        <img src=WebContactc.png class="img-responsive center-block" id="mar102">
      </div>

      <div class="row">
        <div class="img-responsive">
          <a href="mailto:support@riskybee.com" title="Email">
            <img src=WebEmailc.png class="center-block" id="mar25">
          </a>
        </div>
      </div>

      <div class="row" id="mar20">
        <div class="col-xs-6">
          <div class="img-responsive">
            <a href="https://facebook.com/RiskyBeeGame" title="Facebook">
              <img src=WebFacebook8c.png class="pull-right">
            </a>
          </div>
        </div>

        <div class="col-xs-6">
          <div class="img-responsive">
            <a href="https://twitter.com/riskybeegame" title="Twitter">
              <img src=WebTwitter7c.png>
            </a>
          </div>
        </div>

      </div>

    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

CSS：

/* Links */
a,
a:focus,
a:hover {
  color: #fff;
}

/*
 * Base structure
 */
html {
  background: url(../WebBG1a.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body {
  padding-top: 1.75%; /*1.75%*/
  padding-bottom: 1.75%; /*1.75%*/
  padding-left: 10%;
  padding-right: 10%;
  background: transparent;
}

#mar20 { /*1.5%*/
  margin-top: 1.5%;
}

#mar25 { /*1.75%*/
  margin-top: 1.75%;
}

#mar40 { /*2.75%*/
  margin-top: 2.75%;
}

#mar102 { /*8.6%*/
  margin-top: 8.6%;
}

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}

编辑＃2：

通过执行以下操作，我可以更好地显示视频：

  <div class ="row center-block rbvideo">
    <div class="embed-responsive embed-responsive-16by9">
      <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/FjtfCwNj8yU?rel=0" allowfullscreen></iframe>
    </div>
  </div>

但是在较大的视图上宽度太大，所以我给它一个最大宽度。

.rbvideo {
  margin-top: 40px;
  max-width: 750px;
}

我还将我的css文件中的各种边距间隔更改为px而不是百分比，这会在视图大小减小时更好地展开。现在我只需要弄清楚当视图变小时如何让接触部分缩小一点。现在他们保持相同的规模。

关于Chrome没有显示社交媒体项目，我终于意识到AdBlock Plus阻止了它们。我已将两个图片的文件名都更改为不包含＆＃34; twitter＆＃34;或＆＃34; facebook＆＃34;但他们仍然被封锁。有人知道我能做些什么来阻止这种情况吗？我在其他网站上看到了相同的HTML代码，而ABP并没有阻止它们......

Answer 1

一个非常粗略的例子，因为我之前从未真正玩过它。

其实质是：

  <div class="row">
  <div class="col-xs-12 col-sm-offset-2 col-sm-8 col-md-offset-5 col-md-2 test">
    <p align='center'>
    SOMETHING
    </p>
    </div>
  </div>

https://jsfiddle.net/madivad/s4jbyvL0/1/

在此示例中，适合最小分辨率“xs”的设备将显示整个宽度（12列）

适合小“sm”范围的那些将使用中间8，通过偏移前两列。

中等“md”屏幕将小得多，有5个偏移列，宽2列

编辑：

另外，您使用id代码作为最高边距#mar20等

这些也应该是类，只是添加到类标记中：例如：

<div class="row mar20">

和你的CSS

.mar20{
    .... margin stuff
}

编辑＃2：

使用chrome检查器我只是在youtube embed周围更改了代码，这可以按照您的预期更多地工作，只需修改以获得您喜欢的内容

<div class="col-xs-12 col-sm-offset-2 col-sm-8 col-md-offset-4 col-md-8 col-centered">
      <div class="embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/FjtfCwNj8yU?rel=0" allowfullscreen=""></iframe>
      </div>
</div>

编辑边距：另外，请考虑删除最小设备的边距。以下是夸张的说明：

body { 保证金：10px; }

.test { 背景颜色：红色; }

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {
  body{
    padding-left: 0;
    padding-right: 0;
  }
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {
  body{
    padding-left: 10%;
    padding-right: 10%;
  }
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
  body{
    padding-left: 20%;
    padding-right: 20%;
  }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
  body{
    padding-left: 25%;
    padding-right: 25%;
  }
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
  body{
    padding-left: 30%;
    padding-right: 30%;
  }
}

Bootstrap改进了移动设备上的扩展

1 个答案: