字體媒體查詢不起作用
[英]Font media queries not working
問題描述
我正在嘗試使文本響應。 由於某種原因，媒體查詢無法正常工作，並且字體被推到圖像下方，而字體應在圖像上方。 這是我的代碼：
// 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="my-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>
謝謝！ 任何幫助表示贊賞！
2 個解決方案
解決方案1
0 2016-06-03 17:51:59
將所有文本格式設置選項移到媒體查詢中，然后嘗試。
解決方案2
0 2016-06-03 17:57:57
首先，您需要將@media查詢設置為@media屏幕和（最大寬度：..）。 在某些情況下，瀏覽器需要屏幕參數。
其次，您需要在響應時更改元素的字體大小。 我建議使用em單元做出響應。
在媒體查詢中使用很棒的字體
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.