Question

我在互联网上来回搜索过几次，我简直无法理解在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>

我真的很无能，现在我正在尝试将背景更改为绿色，但这根本不起作用！我已经尝试了一切！请帮助我摆脱痛苦

Answer 1

媒体查询中的两个问题：

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

媒体查询代码应为：

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

Answer 2

你有：

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

应该是：

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

CSS Media查询根本不起作用

2 个答案: