@font-face {
font-family: "Segoe UI", Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
src: url('fonts/BebasNeue-webfont.eot');
src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/BebasNeue-webfont.woff') format('woff'),
url('fonts/BebasNeue-webfont.ttf') format('truetype'),
url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
font-weight: normal;
font-style: normal;
}
* {box-sizing: border-box;}
[class*="col-"] {
float: left;
padding: 15px;
}
h2 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
color: #0055cc;
margin: 0 0 10px;
text-shadow:0 2px 2px rgba(0,0,0,.7);
font-variant: small-caps;
text-align: center;
}
p {text-align:justify;}
a {text-decoration: none;}
body {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
background: #8080ff url("../imgs/body.jpg") no-repeat fixed center;
background-size: cover;
margin:0;
padding:0;
text-align:justify;
}
.shadow {box-shadow: 10px 10px 5px #888888;}
.border {
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
}
.navbar {
width: 100%;
height: 50px;
background-color: #8080FF;
position: -webkit-sticky;
position: sticky;
top: 0px;
z-index: 1000;
}
.sidenav {
height:100%;
top: 50px;
width: 16.66%;
float: left;
background-color: #000099;
position:sticky!important;
z-index:999;
overflow:auto
}
.cont2 {
height:100%;
top: 50px;
width: 83.33%;
background: #fff url("../imgs/bg-white.png") no-repeat center fixed;
background-size: 100% 100%;
position:sticky!important;
z-index:100;
overflow:auto
}
#logo {width: 100%;}
#logo img {
display: block;
margin: auto;
width: auto;
}
/* For mobile phones: */
[class*="col-"] {width: 100%;}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/stickyfill/1.1.4/stickyfill.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Gulf Coast Broadband - Wireless Internet for South Louisiana</title>
<meta charset="UTF-8">
<meta name="description" content="Gulf Coast Broadband">
<meta name="keywords" content="Louisiana,Wireless,Internet,Gulf,Coast,Broadband">
<meta name="author" content="Christopher Waguespack">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/css/content.css">
<script>
$(function(){
$('.navbar').Stickyfill();
$('.sidenav').Stickyfill();
});
</script>
</head>
<body>
<div id="logo">
<img src="imgs/gcb-new.png">
</div>
<div class="navbar">
<h2>☸</h2>
</div>
<div class="sidenav col-3">
<ul>
<li>☈</li>
</ul>
</div>
<div class="cont2 col-9">
<center><h2>Welcome to Gulf Coast Broadband!</h2></center>
<p>Since 2007, Gulf Coast Broadband has been proudly providing quality wireless internet service to the Bayou Region. From Four-Mile Bayou to the port of West St. Mary, we have offered service to areas that would otherwise be unable to connect to the internet at an affordable price, or at all.</p>
<p>These days, internet access has become an important part of most people's daily lives. Whether conducting business via email or video, or just simply enjoying quality family time watching movies with the family on Netflix, almost everyone needs access. Even more notable, applications such as Netflix (media streaming), video chat, and a growing number of online video game require High-Speed Internet access - slower DSL and costly cable just won't do!</p>
<p>Wireless technology allows us so many options for staying connected to others, whether they are friends and family or business associates. However, to be able to use these incredible communication tools YOU HAVE TO BE CONNECTED to the outside world.</p>
<p>High Speed Broadband Internet is a Must!</p>
<p>You can Facebook from your iPad, watch movies from Netflix, read a book on your Kindle, order products from your vendors. The World Wide Web is a virtual encyclopedia of solutions for almost all of your wants, needs or desires.</p>
<p>Gulf Coast Broadband also provides wireless internet telephone services (Voice over IP - VoIP). This allows for far cheaper service rates with the quality of digital telephone services just like cell phones use today.</p>
<p>Since 2007, Gulf Coast Broadband has been proudly providing quality wireless internet service to the Bayou Region. From Four-Mile Bayou to the Port of West St. Mary, we have offered service to areas that would otherwise be unable to connect to the internet at an affordable price, or at all.</p>
<p>These days, internet access has become an important part of most people's daily lives. Whether conducting business via email or video, or just simply enjoying quality family time watching movies with the family on Netflix, almost everyone needs access. Even more notable, applications such as Netflix (media streaming), video chat, and a growing number of online video game require High-Speed Internet access - slower DSL and costly cable just won't do!</p>
<p>Wireless technology allows us so many options for staying connected to others, whether they are friends and family or business associates. However, to be able to use these incredible communication tools YOU HAVE TO BE CONNECTED to the outside world.</p>
<p>High Speed Broadband Internet is a Must!</p>
<p>You can Facebook from your iPad, watch movies from Netflix, read a book on your Kindle, order products from your vendors. The World Wide Web is a virtual encyclopedia of solutions for almost all of your wants, needs or desires.</p>
<p>Gulf Coast Broadband also provides wireless internet telephone services (Voice over IP - VoIP). This allows for far cheaper service rates with the quality of digital telephone services just like cell phones use today.</p>
</div>
</body>
</html>我见过无数人有同样的问题，并且通过许多可能的解决方案我无法弄清楚发生了什么。
我花了几个多小时尝试了这么多变体，但每一件事都破坏了我正在工作的小代码。
将媒体查询的类添加到我需要影响的元素也会破坏我的粘性导航。有人能找出不对的地方吗？
最佳答案
找到了答案。虽然一些代码 我用的是直接来自w3schools的，它是 显然对JS不太友好 以及我在 div 上使用的 float 。
删除:
[class*="col-"] {
float: left;
padding: 15px;
}
还有这个:
[class*="col-"] {
width: 100%;
}
一旦那两个片段消失了，@media 查询开始响应，JS 粘性 div 不再损坏。如果有人 知道为什么这两个类调用会 打破东西，我当然愿意 开明! :)
关于html - CSS3 @media 调用不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43024512/