Question

我正在努力使一些文字响应。出于某种原因，媒体查询不起作用，字体被推到图像下方，而它应该在上面。这是我的代码：

// Bootstrap callback test
if ($('#bootstrapCssTest').is(':visible') === true) {
  $('<link href="/bootstrap/js/bootstrap.min.js" rel="stylesheet" type="text/css" />').appendTo('head');
}

// Make .navbarButtonDiv go to its child 'a' tag's href on click
$(".navbarButtonDiv").click(function() {
  window.location = $(this).find("a").attr("href");
  return false;
});

// Collapse navbar on nav link click
$(document).on('click', '.navbar-collapse.in', function(e) {
  if ($(e.target).is('a')) {
    $(this).collapse('hide');
  }
});

// Collapse navbar on document click
$(document).on('click', function() {
  $('.collapse').collapse('hide');
});

/* Font imports */

@import url(https://fonts.googleapis.com/css?family=Bitter:400,400italic,700);
@font-face {
  font-family: "FuturaNewLight";
  src: url("fonts/FuturaNewLight.otf")
}
/* Navbar padding */

body {
  padding-top: 100px;
  overflow-x: hidden !important;
}
/* Navbar */

.navbar {
  font-family: "Bitter", serif;
}
.navbar.navbar-custom .navbar-brand.navbar-brand-centered {
  position: absolute;
  left: 50%;
  top: 0;
  display: block;
  width: 100px;
  text-align: center;
  padding: 0;
}
.navbar.navbar-custom > .wrapper .navbar-brand.navbar-brand-centered {
  margin-left: -55px;
  margin-top: 10px;
}
.navbar .nav.navbar-nav {
  font-size: 150%;
}
.navbar-logo {
  height: 145%;
}
/* Media queries */

@media (min-width: 768px) {
  .wrapper {
    padding-right: 15px;
  }
  .navbar.navbar-custom .navbar-nav > li > a {
    line-height: 60px;
    transition: background 200ms linear;
  }
  .navbar.navbar-custom .navbar-nav > li > a:hover {
    background: #96D5FF;
  }
}
@media (max-width: 767px) {
  .navbar.navbar-custom {
    padding: 20px 0;
  }
  .navbar.navbar-custom .navbar-collapse {
    margin: 20px 0 -20px;
    border: none;
    box-shadow: none;
    height: 260px;
  }
  .navbar.navbar-custom .navbar-nav > li > a {
    text-align: center;
  }
  .navbar-logo {
    margin-left: 20px;
    height: 110%;
  }
  .futuraNewLightHeader {
    font-size: 20px;
  }
}
/* Header styling */

#jumbotronHeader {
  position: relative;
  font-family: "Bitter", serif;
  width: 100%;
  bottom: 9px;
}
#homePageImage {
  position: relative;
  -webkit-filter: blur(5px);
  filter: blur(5px);
  bottom: 30px;
  z-index: -1;
  width: 70%;
}
/* Font styling */

.futuraNewLightHeader {
  position: absolute;
  top: 550px;
  font-size: 150px;
  width: 100%;
  color: White;
  text-shadow: 2px 2px Black;
  font-family: "FuturaNewLight";
}
.futuraNewLightSubHeader {
  position: absolute;
  top: 750px;
  font-size: 60px;
  width: 100%;
  color: White;
  text-shadow: 2px 2px Black;
  font-family: "FuturaNewLight";
}
#dynamicHeaderText {
  color: #2099FF;
}
/* General styling */

.centerText {
  text-align: center;
}

<!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">

  <title>Education for Everyone</title>
  <link rel="icon" type="image/png" href="images/edufeLogo.png">
  <!-- Bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <div class="container-fluid">
    <nav class="navbar navbar-default navbar-fixed-top navbar-custom" role="navigation">
      <div class="wrapper">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse"> <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <a class="navbar-brand navbar-brand-centered" href="#/">
          <img class="navbar-logo" src="images/edufeLogo.png">
        </a>
        <div class="collapse navbar-collapse" id="js-navbar-collapse">
          <ul class="nav navbar-nav navbar-left">
            <li><a href="#">Home</a>
            </li>
            <li><a href="#">About</a>
            </li>
            <li><a href="#">Learn</a>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Log In</a>
            </li>
            <li><a href="#">Sign Up</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <!-- Jumbotron -->
    <div class="jumbotron" id="jumbotronHeader">
      <h1 class="display-3 centerText">Education for Everyone</h1>
      <p class="lead centerText">Learn. Create. Share.</p>
      <hr class="m-y-3">
    </div>

    <!-- Image header -->
    <div class="imageHeader">
      <span class="futuraNewLightHeader centerText"><span id="dynamicHeaderText">Learn</span> something new.</span>
      <span class="futuraNewLightSubHeader centerText">From the internet to real life.</span>
    </div>

    <img src="images/homePageImage.png" id="homePageImage" class="center-block img-responsive">
  </div>

  <!-- Script tags -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>

</html>

谢谢！任何帮助表示赞赏！

Answer 1

将所有文本格式选项移动到媒体查询中，然后尝试。

Answer 2

首先，您需要将@media查询设置为@media屏幕和（max-width：....）。有些情况下浏览器需要屏幕参数

其次，您需要在响应时更改元素的字体大小。我建议使用em单元来做出响应。

字体媒体查询不起作用

2 个答案: