Wordpress - 媒体查询不起作用答案

【问题标题】：Wordpress - Media Queries not workingWordpress - 媒体查询不起作用
【发布时间】：2017-08-02 05:27:52
【问题描述】：

我在前端测试站点上测试了一些 RWD 媒体查询，我刚刚将代码复制到我的 style.css 文件中，但它们似乎不想工作。我正在使用 html5blank作为父母的主题。这就是我的 header.php -

<!doctype html>
<html <?php language_attributes(); ?> class="no-js">
    <head>
        <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='https://fonts.googleapis.com/css?family=Merriweather+Sans:100,200,400,700,700i,800,800i' rel='stylesheet' type='text/css' />
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


        <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_stylesheet_directory_uri(); ?>',
            tests: {}
        });
        </script>

    </head>

我相信这一切都应该如此。在我的 style.css 我有这个 -

/*
 Theme Name:   HTML5 Blank Child Theme
 Description:  A child theme of the HTML5 Blank WordPress theme
 Author:       Mike Whitehead
 Template:     html5blank
 Version:      1.0.0
*/

/* ALL STYLES BELOW */

我的媒体查询低于我的定制样式但高于我的骨架网格代码 -

/* RWD HERE */
@media screen and (max-width: 1000px) {
  /* SOME CODE HERE */
}

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

  /* SOME CODE HERE */
}

/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/

我的 RWD 媒体查询是否必须位于 style.css 文件的绝对底部？还有什么我想念的吗？需要缩进吗？

【问题讨论】：

是的。您的媒体查询应该在 bootom 进行。
@vel 没用。
你能分享我加载css列表吗？
@vel 你是什么意思？
或者你试过@media (max-width: 1000px) { /* SOME CODE HERE */ }？

标签： php css wordpress responsive-design

【解决方案1】：

我希望您使用的是子主题，而这个 header.php 正在返回父主题 style.css

尝试使用https://codex.wordpress.org/Function_Reference/get_stylesheet_directory_uri get_stylesheet_directory_uri() 获取实际 CSS 文件的路径。

您的 CSS 格式正确。

<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory')?>/style.css" />

变成

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri() ?>/style.css" />

【讨论】：

无论如何我都在使用子主题，并且样式正在加载我的自定义样式。它根本没有加载我的媒体查询。
然后确保按照@vel 的建议，最后加载媒体查询。仔细检查您的语法是否符合 css-tricks.com/css-media-queries 等良好资源
您是建议我需要更改上面的链接还是应该更改它？
如果它现在正在为您加载正确的 style.css，请忽略此操作。但是，如果您这样做，它会起作用，但不是必需的
这很令人沮丧。

【解决方案2】：

你的css应该是这样的。

        /*
        * Skeleton V2.0.4
        * Copyright 2014, Dave Gamache
        * www.getskeleton.com
        * Free to use under the MIT license.
        * http://www.opensource.org/licenses/mit-license.php
        * 12/29/2014
        */


        /* Table of contents
        ––––––––––––––––––––––––––––––––––––––––––––––––––
        - Grid
        - Base Styles
        - Typography
        - Links
        - Buttons
        - Forms
        - Lists
        - Code
        - Tables
        - Spacing
        - Utilities
        - Clearing
        - Media Queries
        */


        /* RWD HERE */
        @media screen and (max-width: 1000px) {
          /* SOME CODE HERE */
        }

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

          /* SOME CODE HERE */
        }

        or

        @media (max-width: 1000px) {
          /* SOME CODE HERE */
        }

        @media (max-width: 480px) { 

          /* SOME CODE HERE */
        }

媒体查询应该在skeleton.css的底部。

【讨论】：

【解决方案3】：

我通过创建一个 responsive.css 独立文件并将以下内容添加到我的 header.php 文件中解决了这个问题 -

  <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri() ?>/responsive.css" />

【讨论】：