所以这是一个有趣的，我遇到过。我对@media screen and (max-width:700px){的移动响应有媒体查询。当我将浏览器（Chrome）从大于700px调整到更小的尺寸时，媒体查询功能完善。在检查模式下，当我将浏览器的大小从700px调整到低于它的位置后切换设备时，媒体查询似乎正常运行。但是，当我刷新页面并立即选择移动浏览器时，CSS样式会中断。完全失去了为什么会发生这种情况。我已插入<link rel="stylesheet" type="text/css" href="home.css" />以使其与Chrome配合使用。这是我的代码：
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Abel|Fugaz+One|Lato|Montserrat:900|News+Cycle|Yellowtail" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="home.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div class="wrapper"> <!-- wrapper -->
<header>
<nav id='cssmenu'>
<div class="logo"><a href="home.html">Responsive </a></div>
<div id="head-mobile"></div>
<div class="button"></div>
<ul>
<li class='active'><a href='#'>HOME</a></li>
<li><a href='#'>ABOUT</a>
<ul>
<li><a href='#'>Topic 1</a></li>
<li><a href='#'>Topic 2</a></li>
</ul>
</li>
<li><a href='#'>Topic 3</a>
<ul>
<li><a href='#'>Sub1</a></li>
<li><a href='#'>Sub2</a></li>
<li><a href='#'>Sub3</a></li>
</ul>
</li>
<li><a href='#'>Topic 4</a>
<ul>
<li><a href='#'>Sub1</a></li>
<li><a href='#'>Sub2</a></li>
<li><a href='#'>Sub3</a></li>
</ul>
</li>
<li><a href='#'>Topic 5</a>
<ul>
<li><a href='#'>s1</a></li>
<li><a href='#'>s2</a></li>
<li><a href='#'>s3</a></li>
</ul>
</li>
<li><a href='#'>topic 5</a></li>
</ul>
</nav>
</header>
<div class="parallax">
<div class="opener">
<div class="opener-align">
Title 1
</div>
</div>
<div data-scroll-reveal class="opener-second">
<div class="opener-second-align">
Title 2
</div>
</div>
</div>
<div class="parallax2">
<div class="parallax-transition-1">
<div class="services-annoucement-header">
Three specialized services:
</div>
<div class="topic-wrapper"><div class="parallax-icons"><img class="hp-image-size" src="img1.png"/><div class="icon-text">CSS <br />Optimization</div></div>
<div class="topic-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc felis turpis, pharetra quis risus at, convallis fringilla ipsum. Etiam elit dui, pellentesque porttitor bibendum sed, molestie sit amet dolor.
</div>
</div>
<div class="topic-wrapper">
<div class="parallax-icons"><img class="hp-image-size" src="services.png"/><div class="icon-text">CSS <br />Advertising</div></div>
<div class="topic-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc felis turpis, pharetra quis risus at, convallis fringilla ipsum. Etiam elit dui, pellentesque porttitor bibendum sed, molestie sit amet dolor.
</div>
</div>
<div class="topic-wrapper"><div class="parallax-icons"><img class="services" src="whatever.png" /><div class="icon-text">Whatever <br />Thing</div></div>
<div class="topic-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc felis turpis, pharetra quis risus at, convallis fringilla ipsum. Etiam elit dui, pellentesque porttitor bibendum sed, molestie sit amet dolor.
</div>
</div>
</div>
</div>
<div class="parallax3">
<div class="parallax-transition-2">
<div class="services-annoucement-header">
Two additional points
</div>
<div class="topic-wrapper2"><div class="parallax-icons"><img class="hp-image-size" src="randomicon.png"/><div class="icon-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div></div>
<div class="topic-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc felis turpis, pharetra quis risus at, convallis fringilla ipsum. Etiam elit dui, pellentesque porttitor bibendum sed, molestie sit amet dolor.
</div>
</div>
<div class="topic-wrapper2"><div class="parallax-icons"><img class="hp-image-size" src="img.png"/><div class="icon-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div></div>
<div class="topic-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc felis turpis, pharetra quis risus at, convallis fringilla ipsum. Etiam elit dui, pellentesque porttitor bibendum sed, molestie sit amet dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc felis turpis, pharetra quis risus at, convallis fringilla ipsum. Etiam elit dui, pellentesque porttitor bibendum sed, molestie sit amet dolor.
</div>
</div>
</div>
</div>
<div class="parallax4">
<div class="parallax-transition-2">
</div>
</div>
</div> <!-- wrapper -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery.js"></script>
</body>
</html>
这是我的CSS：
/*CSS RESET*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Turn off parallax scrolling for tablets and phones. Increase/decrease the pixels if needed */
/* @media only screen and (max-device-width: 1024px) {
.parallax {
background-attachment: scroll;
}
}
media queries above */
body, html {
height: 100%;
}
.parallax {
/* The image used */
background-image: url("sunlife-building-mtl-digital-marketing.jpg");
/* Full height */
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.parallax2 {
/* The image used */
background-image: url("st-josephs-oratory-montreal-services.jpg");
/* Full height */
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.parallax3 {
/* The image used */
background-image: url("montreal-skyline-seo.jpg");
/* Full height */
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.parallax4 {
/* The image used */
background-image: url("olympic-stadium-montreal-seo-architecture.jpg");
/* Full height */
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* --- nav below --- */
/* --- nav above --- */
/* --- general below --- */
.opener {
text-align: center;
vertical-align: center;
position:relative;
top:30%;
color: rgba(14, 115, 230, 1.0);
font-family: 'Montserrat', sans-serif;
font-size: 35px;
}
.opener-align {
width:80%;
background-color: rgba(245, 243, 243, 0.9);
border-radius: 25px;
margin:auto;
padding:5px 15px 5px 15px;
}
.opener-second {
text-align: center;
vertical-align: center;
position:relative;
top:45%;
color: #DCB518;
font-family: 'Yellowtail', cursive;
font-size: 40px;
}
.opener-second-align {
width:60%;
background-color: rgba(42, 41, 33, 0.7);
border-radius: 25px;
margin:auto;
padding:5px 15px 5px 15px;
}
.parallax-transition-1 {
text-align: center;
top: 20%;
position: relative;
display: inline-block;
width:100%;
}
.parallax-transition-2 {
text-align: center;
top: 15%;
position: relative;
display: inline-block; /*check this */
width:100%;
}
.services-annoucement-header {
background-color: rgba(245, 243, 243, 0.9);
border-radius: 15px;
width:50%;
margin:0 auto 40px auto;
font-family: 'Yellowtail', cursive;
color: rgba(14, 115, 230, 1.0);
font-size:40px;
padding:15px 15px 15px 15px;
}
.hp-image-size {
width:200px;
height:200px;
}
.topic-wrapper {
display: inline-block;
width: 25%;
min-width: 230px;
background-color: rgba(245, 243, 243, 0.9);
border-radius: 25px;
transition-duration: 0.4s;
height: 410px;
vertical-align: top;
font-size:1em;
}
.topic-wrapper:hover {
background-color: rgba(99,99,99,0.75);
color: white;
}
.topic-wrapper2 {
display: inline-block;
width: 35%;
min-width: 330px;
background-color: rgba(245, 243, 243, 0.9);
border-radius: 25px;
transition-duration: 0.4s;
height: 460px;
vertical-align: top;
}
.topic-wrapper2:hover {
background-color: rgba(99,99,99,0.75);
color: white;
}
.topic-text {
font-family: 'News Cycle', sans-serif;
text-align:justify;
margin: 0 15px 5px 15px;
}
.parallax-icons {
font-family: 'Lato', sans-serif;
margin: 10px 25px 10px 25px;
}
.icon-text {
margin-top:5px;
}
/* --- general above --- */
@font-face {
font-family: exo;
src:url(Exo-regular.otf);
}
/* --- forms below --- */
textarea {
resize:none;
}
form {
display: inline-block;
width: 575px;
background-color: rgba(245, 243, 243, 0.9);
border-radius: 25px;
transition-duration: 0.4s;
height: 400px;
font-family: 'Lato', sans-serif;
}
input {
margin:auto;
}
.formservicesspacing {
display:block;
margin: 15px 0 15px 0;
}
/* --- media queries below --- */
*{margin:0;padding:0;text-decoration:none}
body{background:#555;}
header{position:relative;width:100%;background:#333;}
.logo{position:relative;z-index:123;padding:10px;font:18px verdana;color:#6DDB07;float:left;width:15%}
.logo a{color:#6DDB07;}
nav{position:relative;width:700px;margin:0 auto;} /* fixed this for right scroll */
#cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a,#cssmenu #head-mobile{border:0;list-style:none;line-height:1;display:block;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
#cssmenu:after,#cssmenu > ul:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
#cssmenu #head-mobile{display:none}
#cssmenu{font-family:sans-serif;background:#333}
#cssmenu > ul > li{float:left}
#cssmenu > ul > li > a{padding:17px;font-size:12px;letter-spacing:1px;text-decoration:none;color:#ddd;font-weight:700;}
#cssmenu > ul > li:hover > a,#cssmenu ul li.active a{color:#fff}
#cssmenu > ul > li:hover,#cssmenu ul li.active:hover,#cssmenu ul li.active,#cssmenu ul li.has-sub.active:hover{background:#448D00!important;-webkit-transition:background .3s ease;-ms-transition:background .3s ease;transition:background .3s ease;}
#cssmenu > ul > li.has-sub > a{padding-right:30px}
#cssmenu > ul > li.has-sub > a:after{position:absolute;top:22px;right:11px;width:8px;height:2px;display:block;background:#ddd;content:''}
#cssmenu > ul > li.has-sub > a:before{position:absolute;top:19px;right:14px;display:block;width:2px;height:8px;background:#ddd;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
#cssmenu > ul > li.has-sub:hover > a:before{top:23px;height:0}
#cssmenu ul ul{position:absolute;left:-9999px}
#cssmenu ul ul li{height:0;-webkit-transition:all .25s ease;-ms-transition:all .25s ease;background:#333;transition:all .25s ease}
#cssmenu ul ul li:hover{}
#cssmenu li:hover > ul{left:auto}
#cssmenu li:hover > ul > li{height:35px}
#cssmenu ul ul ul{margin-left:100%;top:0}
#cssmenu ul ul li a{border-bottom:1px solid rgba(150,150,150,0.15);padding:11px 15px;width:170px;font-size:12px;text-decoration:none;color:#ddd;font-weight:400;}
#cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a{border-bottom:0}
#cssmenu ul ul li:hover > a,#cssmenu ul ul li a:hover{color:#fff}
#cssmenu ul ul li.has-sub > a:after{position:absolute;top:16px;right:11px;width:8px;height:2px;display:block;background:#ddd;content:''}
#cssmenu ul ul li.has-sub > a:before{position:absolute;top:13px;right:14px;display:block;width:2px;height:8px;background:#ddd;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
#cssmenu ul ul > li.has-sub:hover > a:before{top:17px;height:0}
#cssmenu ul ul li.has-sub:hover,#cssmenu ul li.has-sub ul li.has-sub ul li:hover{background:#363636;}
#cssmenu ul ul ul li.active a{border-left:1px solid #333}
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active> a{border-top:1px solid #333}
@media screen and (max-width:700px){
.logo{position:absolute;top:0;left: 0;width:100%;height:46px;text-align:center;padding:10px 0 0 0 ;float:none}
.logo2{display:none}
nav{width:100%;}
#cssmenu{width:100%}
#cssmenu ul{width:100%;display:none}
#cssmenu ul li{width:100%;border-top:1px solid #444}
#cssmenu ul li:hover{background:#363636;}
#cssmenu ul ul li,#cssmenu li:hover > ul > li{height:auto}
#cssmenu ul li a,#cssmenu ul ul li a{width:100%;border-bottom:0}
#cssmenu > ul > li{float:none}
#cssmenu ul ul li a{padding-left:25px}
#cssmenu ul ul li{background:#333!important;}
#cssmenu ul ul li:hover{background:#363636!important}
#cssmenu ul ul ul li a{padding-left:35px}
#cssmenu ul ul li a{color:#ddd;background:none}
#cssmenu ul ul li:hover > a,#cssmenu ul ul li.active > a{color:#fff}
#cssmenu ul ul,#cssmenu ul ul ul{position:relative;left:0;width:100%;margin:0;text-align:left}
#cssmenu > ul > li.has-sub > a:after,#cssmenu > ul > li.has-sub > a:before,#cssmenu ul ul > li.has-sub > a:after,#cssmenu ul ul > li.has-sub > a:before{display:none}
#cssmenu #head-mobile{display:block;padding:23px;color:#ddd;font-size:12px;font-weight:700}
.button{width:55px;height:46px;position:absolute;right:0;top:0;cursor:pointer;z-index: 12399994;}
.button:after{position:absolute;top:22px;right:20px;display:block;height:4px;width:20px;border-top:2px solid #dddddd;border-bottom:2px solid #dddddd;content:''}
.button:before{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;position:absolute;top:16px;right:20px;display:block;height:2px;width:20px;background:#ddd;content:''}
.button.menu-opened:after{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;top:23px;border:0;height:2px;width:19px;background:#fff;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}
.button.menu-opened:before{top:23px;background:#fff;width:19px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
#cssmenu .submenu-button{position:absolute;z-index:99;right:0;top:0;display:block;border-left:1px solid #444;height:46px;width:46px;cursor:pointer}
#cssmenu .submenu-button.submenu-opened{background:#262626}
#cssmenu ul ul .submenu-button{height:34px;width:34px}
#cssmenu .submenu-button:after{position:absolute;top:22px;right:19px;width:8px;height:2px;display:block;background:#ddd;content:''}
#cssmenu ul ul .submenu-button:after{top:15px;right:13px}
#cssmenu .submenu-button.submenu-opened:after{background:#fff}
#cssmenu .submenu-button:before{position:absolute;top:19px;right:22px;display:block;width:2px;height:8px;background:#ddd;content:''}
#cssmenu ul ul .submenu-button:before{top:12px;right:16px}
#cssmenu .submenu-button.submenu-opened:before{display:none}
#cssmenu ul ul ul li.active a{border-left:none}
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active > a{border-top:none}
.opener {
text-align: center;
vertical-align: center;
position:relative;
top:30%;
color: rgba(14, 115, 230, 1.0);
font-family: 'Montserrat', sans-serif;
font-size: 35px;
}
.opener-align {
width:80%;
background-color: rgba(245, 243, 243, 0.9);
border-radius: 25px;
margin:auto;
padding:5px 15px 5px 15px;
}
.opener-second {
text-align: center;
vertical-align: center;
position:relative;
top:45%;
color: #DCB518;
font-family: 'Yellowtail', cursive;
font-size: 40px;
}
.opener-second-align {
width:60%;
background-color: rgba(42, 41, 33, 0.7);
border-radius: 25px;
margin:auto;
padding:5px 15px 5px 15px;
}
.parallax-transition-1 {
text-align: center;
top: 5%;
position: relative;
display: inline-block;
width:100%;
}
.parallax-transition-2 {
text-align: center;
top: 15%;
position: relative;
display: inline-block;
width:100%;
}
.services-annoucement-header {
background-color: rgba(245, 243, 243, 0.9);
border-radius: 15px;
width:100%;
margin:0 auto 40px auto;
font-family: 'Yellowtail', cursive;
color: rgba(14, 115, 230, 1.0);
font-size:40px;
padding:15px 0px 15px 0px;
}
.hp-image-size {
width:45%;
height:auto;
vertical-align: middle;
}
.topic-wrapper {
display: table-cell;
width: 90%;
background-color: rgba(245, 243, 243, 0.9);
border-radius: 25px;
transition-duration: 0.4s;
height:30%;
font-size:1em;
margin-top:5%;
}
.topic-wrapper:hover {
background-color: rgba(99,99,99,0.75);
color: white;
}
.topic-wrapper2 {
display: inline-block;
width: 100%;
background-color: rgba(245, 243, 243, 0.9);
border-radius: 25px;
transition-duration: 0.4s;
min-height: 310px;
}
.topic-wrapper2:hover {
background-color: rgba(99,99,99,0.75);
color: white;
}
.topic-text {
font-family: 'News Cycle', sans-serif;
text-align:justify;
width:50%;
display:inline-block;
vertical-align: middle;
padding: 5px 0 5px 0;
}
.parallax-icons {
font-family: 'Lato', sans-serif;
margin: auto;
width:40%;
display:inline-block;
vertical-align: middle;
}
.icon-text {
margin-top: 0;
width:50%;
display:inline-block;
font-size:1em;
vertical-align: middle;
}
textarea {
resize:none;
}
form {
display: inline-block;
width: 100%;
background-color: rgba(245, 243, 243, 0.9);
border-radius: 25px;
transition-duration: 0.4s;
height: 400px;
font-family: 'Lato', sans-serif;
}
input {
margin:auto;
}
.parallax {
/* The image used */
background-image: url("sunlife-building-mtl-digital-marketing.jpg");
/* Full height */
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat:no-repeat;
background-size: cover;
}
.parallax2 {
/* The image used */
background-image: url("st-josephs-oratory-montreal-services.jpg");
/* Full height */
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
} /* end of media query 700 width */
这是小Jquery：
$(document).ready(function() {
(function($) {
$.fn.menumaker = function(options) {
var cssmenu = $(this), settings = $.extend({
format: "dropdown",
sticky: false
}, options);
return this.each(function() {
$(this).find(".button").on('click', function(){
$(this).toggleClass('menu-opened');
var mainmenu = $(this).next('ul');
if (mainmenu.hasClass('open')) {
mainmenu.slideToggle().removeClass('open');
}
else {
mainmenu.slideToggle().addClass('open');
if (settings.format === "dropdown") {
mainmenu.find('ul').show();
}
}
});
cssmenu.find('li ul').parent().addClass('has-sub');
multiTg = function() {
cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
cssmenu.find('.submenu-button').on('click', function() {
$(this).toggleClass('submenu-opened');
if ($(this).siblings('ul').hasClass('open')) {
$(this).siblings('ul').removeClass('open').slideToggle();
}
else {
$(this).siblings('ul').addClass('open').slideToggle();
}
});
};
if (settings.format === 'multitoggle') multiTg();
else cssmenu.addClass('dropdown');
if (settings.sticky === true) cssmenu.css('position', 'fixed');
resizeFix = function() {
var mediasize = 700;
if ($( window ).width() > mediasize) {
cssmenu.find('ul').show();
}
if ($(window).width() <= mediasize) {
cssmenu.find('ul').hide().removeClass('open');
}
};
resizeFix();
return $(window).on('resize', resizeFix);
});
};
})(jQuery);
(function($){
$(document).ready(function(){
$("#cssmenu").menumaker({
format: "multitoggle"
});
});
})(jQuery);
});
我很遗憾为什么会发生这种情况..