Question

我在前端测试网站上测试了一些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文件的绝对底部？还有别的东西我不见了吗？它需要缩进吗？

Answer 1

你应该是这样的。

        /*
        * 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的底部。

Answer 2

我希望您使用的是子主题，此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" />

Answer 3

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

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

Wordpress - 媒体查询不起作用

3 个答案: