我在my site上设置的平板电脑/手机媒体查询样式似乎被忽略了，即使我在<head>中有一个视口声明且@media样式位于样式表的底部 - 因此它们不能被桌面样式覆盖。我确信这很简单，但我已经尝试了所有我能想到的东西。调整浏览器窗口大小时，在移动设备和桌面设备上都会忽略这些样式。奇怪的是，响应式菜单运行良好...但网站的其余部分充满了不舒服的填充，浮动和边缘没有移动样式。任何帮助表示赞赏！
@media screen and (max-width: 768 px){
body { }
#container {padding: 0;}
#content, #content-archive, #content-full, #content-blog, #content-images, #content-sitemap {padding: 0px;} #content h2, #content-full h2, #content-blog h2 {margin-left: 0px;}
#header { padding: 0.5em; overflow:auto; }
#header #logo img {max-width: 100%;}
.archive #widgets, .page #widgets {width:100%;padding 20px;}
.grid, .grid-right {float:none;}
#scaleContainer {display: none;}
#mobilefeatured {display:block; width: 100%; margin-top:17.5%; zoom:58%;}
#mobilecarousel-hype-container { max-width: 100%; }
.page .featuredimg {display:block; }
.archive .featuredimg, .single .featuredimg, .search .featuredimg {display:block; }
.top-menu {display:none;}
.top-menu li a, .top-menu li:first-child a { }
.menu li, .footer-menu li, .sub-header-menu li {float:none;text-align:left; }
.page .menu-item-6820, .single .menu-item-6820 { display:none; }
#mobile-nav-instruct {display: none;} #search {float:none; text-align: left; margin:auto;}
#search input[type="text"] {text-align: left;}
#wrapper {clear:none; position:relative;}
.post-entry {padding: 20px; }
.post-entry h1, .post-entry h2, .post-entry h3, .post-entry h6, .post-entry div h1, .post-entry div h2, .post-entry div h3, .post-entry div h6, .entry h2 { padding-left: 0; }
.post-entry h6, .post-entry div h6 {margin-bottom: 10px; }
.summary {width:100%; margin:0; }
.thumbnail-wrapper {width: 100%; height:auto;}
.summary img {max-width:100%; height:auto; }
.summary h2 {width:100%; margin: 10px auto;}
.dates-artists {width:100%; margin:0;}
.rep {width:100%; margin:0; } #photo-rep {float:none; width: 100%;}
#vitals {float:left; clear: both; width: 100%; margin-left: 0px; margin-top:20px; -webkit-border-radius:0px; -moz-border-radius:0px; background-color:#fff; border: none; border-radius:0px; font-size: 100%; padding: 5px 0px !important; }
.info-buy { }
.programPricing { clear:both; padding-left:0px; margin-top:-20px; margin-left:0; }
#share .dates, .buy-dates-wrapper .dates { padding-left: 2em; width:75%; line-height: 1.5em;}
.home .widget-wrapper { height: auto; padding: 1em; border:none; background-color: #fff; font-size: 14px; }
.desc {float:right; clear:none;}
.home .newsblog {height: auto; padding: 1em; border:none; background-color: #fff; font-size: 14px; }
.widget-wrapper { background-color:#fff; border:none; font-size:14px; height: auto; padding: 1em;}
.bio { width:100%; }
.roster { width:100%; } #googleCalEmbed { display: none; } #googleEmbedLink {display:block;} #seating table { border: none; width:100%; margin:0%;}
#seating td {border: none;}
#seatingMobileHint {display:block;}
.sponsors { clear:both; padding: 0px; text-align:center; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; border-top: 1px solid #d6d6d6;}
.sponsors h6 { margin-top: 1.6em; }
.sponsors hr {background:#eee; border:none; clear:both; color:#f9f9f9; float:none; height:1px; margin:5px 0px; width:100%; }
.sponsors a img.alignnone { margin:5px 0px; padding:0;float: none; }
#footer .footernav {display:none; }
#footer { text-align:left; } #footer .widget-wrapper { padding:0; }
#footer h6, h6.title-concertdate { color:#fff; padding: 0 8%; margin-bottom:1em; text-shadow: none;}
#mobilecal { display:block; } #mobilecal span.calnk { opacity: 0; }
.home #widgets #cal, .page #widgets, .archive #widgets { display:block; }
.mobilecontact {display:block;} #footer .social-icons { text-align:left; }
.copyright { text-align: center; } /* The homepage featured events slider for retina displays */
#mobilefeatured { display:block; zoom:50%; }
}
答案 0 :(得分：1)
您的媒体查询格式错误：
@media screen and (max-width: 768 px)
号码和单位之间不能有空格：
@media screen and (max-width: 768px)