【发布时间】：2018-04-23 05:29:02
【问题描述】：
我正在使用 html5blank 在 WordPress 上创建网站。在本地，媒体查询运行良好，但是当我将它们添加到 wordpress style.css 文件时，它们似乎不起作用。我已经摆脱了所有媒体查询，只保留了一个简单的来测试它，但它仍然无法正常工作。最后我有我的媒体查询。
这是我的 header.php 文件的一部分：
<!doctype html>
<html <?php language_attributes(); ?> class="no-js">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Raleway:400,500,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
<meta charset="<?php bloginfo('charset'); ?>">
<title><?php wp_title(''); ?><?php if(wp_title('', false)) { echo ' :'; } ?> <?php bloginfo('name'); ?></title>
<link href="//www.google-analytics.com" rel="dns-prefetch">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory')?>/style.css" />
<link href="<?php echo get_template_directory_uri(); ?>/img/icons/favicon.ico" rel="shortcut icon">
<link href="<?php echo get_template_directory_uri(); ?>/img/icons/touch.png" rel="apple-touch-icon-precomposed">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="<?php bloginfo('description'); ?>">
<?php wp_head(); ?>
<script>
// conditionizr.com
// configure environment tests
conditionizr.config({
assets: '<?php echo get_template_directory_uri(); ?>',
tests: {}
});
</script>
</head>
<body <?php body_class(); ?>>
<header>
这些是我为在 Wordpress 中测试而添加到 css 文件底部的简单媒体查询，但它们不起作用：
@media screen and (min-width: 600px) {
div.balancepersonal {
font-size: 100px;
}
}
@media screen and (max-width: 600px) {
div.balancepersonal {
font-size: 10px;
}
}
这是我试图做出响应的 index.php 文件中的 p 标签：
<div class="balance-personal">
<div class="balance-container">
<div class="top-div-balance">
<img src="img/IMG_6739.jpg" class="trees-photo">
<div class="trees-shadow">
<div class="container amenidades-txt">
<p class="balancepersonal">BALANCE PERSONAL</p>
【问题讨论】：
-
试试
max-width: 590px它应该与您的其他媒体查询不同 -
@Sohrab，我尝试了各种组合，例如 ... (max-width: 1400px) 和 (min-width: 1200px) ... 但只是媒体查询是在 wordpress 中不工作。
-
浏览器控制台有错误吗？
-
@AndrewSchultz 媒体查询正在被覆盖。