Question

我正在使用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>

Answer 1

您想要获取bloginfo的stylesheet_url参数：https://developer.wordpress.org/reference/functions/get_bloginfo/

原因：您当前的param在服务器文件目录中提供了位置，而不是浏览器可以访问的Web位置。

修改stylesheet_url应该为您提供style.css的完整位置。

或者您可以使用template_directory_uri（就像您在其他地方一样）并添加style.css部分

Wordpress html5blank主题 - 媒体查询不起作用

1 个答案: