CSS媒体查询根本不起作用[关闭]答案

【问题标题】：CSS Media queries do not work at all [closed]CSS媒体查询根本不起作用[关闭]
【发布时间】：2016-09-09 03:10:49
【问题描述】：

我在互联网上来回搜索了几次，但我根本无法理解在 CSS 中使用媒体查询时我似乎做错了什么。一些背景信息：我正在使用一个名为“Sela”的 wordpress 主题并为其创建了一个子主题，这是我的子主题的 style.css：

/*
Theme Name: Sela Child
Theme URI: https://wordpress.com/themes/sela/
Template: sela
Author: Automattic
Author URI: https://wordpress.com/themes/
Description: Sela is not your typical business theme. Vibrant, bold, and clean, with lots of space for large images, this theme will look great on all devices, from desktop to mobile.
Tags: blog,custom-background,custom-colors,custom-menu,featured-images,full-width-template,microformats,right-sidebar,rtl-language-support,sticky-post,translation-ready,two-columns
Version: 1.0.15.1473287968
Updated: 2016-09-08 00:39:28

*/

.site-footer {
    box-shadow: 0 5px 8px rgba(0,0,0,0.2);
	background-color: #0071bc;
    border-top: 1px solid #d9d9d9;
    color: #fff;
	
}
.main-navigation .menu > li > a::after {
  content: none;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
#infinite-handle span {
	background-color: #0071bc;
}
.site-title {
	display: block;
	margin: auto;
	width: 55%;
}

@media screen and ((max-width:1024px) {
body {
	background: #04d056;
}

那么这是我的header.php的头：

<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
</head>

我真的一无所知，现在我正在尝试将背景更改为绿色，但这根本不起作用！我什么都试过了！请帮助我摆脱痛苦

【问题讨论】：

您有语法错误。当你需要说(max-width:1024px)时，你说的是((max-width:1024px)。 JSFiddle

标签： css wordpress themes media

【解决方案1】：

媒体查询中有两个问题：

使用2个大括号@media screen and ((.......)使用1个一括号
您尚未关闭媒体查询块

媒体查询代码应为：

@media screen and (max-width:1024px) {
    body {background: #04d056;}
}

【讨论】：

嗨，我按照您的指示修复了代码，但媒体查询仍然无法在我的实际手机/平板电脑上加载，它们似乎只适用于谷歌的设备模拟器：/
@AndreasS 此时可能是缓存问题？
这很奇怪，我已经删除了我测试过的每台设备的缓存，它似乎在浏览器或模拟器中完美运行，但在真实设备中却不行！您可以尝试一下： bitcoinhub.be ，在您实际使用移动浏览器之前它可以正常工作
您应该始终使用 icongnito 或私人标签来测试网站或网页...

【解决方案2】：

你有：

@media screen and ((max-width:1024px) {

应该是：

@media screen and (max-width:1024px) {
     //css here
}

【讨论】：

感谢您的快速回复！我确实忽略了这一点，但问题似乎仍然存在？当我使用谷歌开发工具时，媒体查询可以正常工作，但是当我使用我的手机（Galaxy S5）或我的平板电脑（iPad 2）时，绿色背景仍然没有发生？我清理了我的缓存等等？