<之间有什么联系?PHP wp_head() ?>和CSS媒体查询在WordPress


What is the connection between <?php wp_head() ?> and CSS media queries in WordPress?

我想为智能手机上的WP网站显示添加一个单独的。css。但是,当我在真实服务器上测试时,无法加载mobile.css文件。为什么?至少我发现的唯一一件事是,当我在头部标签中包含wp_head();时,桌面style.css加载正常,但mobile.css加载不正常;当我删除wp_head时,桌面一个不工作,但mobile.css工作!

这听起来不合理!但它正在发生。为什么?下面是我在header.php中使用的代码。省略了标题和脚本标签。

<head>
  <meta charset="<?php bloginfo( 'charset' ); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta http-equiv="cleartype" content="on">
  <meta name="HandheldFriendly" content="True">
  <meta name="MobileOptimized" content="320"> 
  <link rel="profile" href="http://gmpg.org/xfn/11">
  <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
  <link rel="stylesheet" type="text/css" href="style.css"/> 
  <link rel="stylesheet" type="text/css" href="mobile.css" media="only screen and (max-device-width: 480px)" />
  <title>...</title>
  <script>...</script>  
  <?php wp_head(); ?> 
</head>

我认为style.css已经通过functions.php加载,在functions.php中找到代码并删除它。代码类似于

 function WordPress_resources() {   
    wp_enqueue_style('style', get_stylesheet_uri());    
}
add_action('wp_enqueue_scripts', 'WordPress_resources');

remove device in (max-device-width: 480px) ----> to (max-width: 480px)

你需要添加模板目录

<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/style.css"/> 
  <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/mobile.css" media="only screen and (max-width: 480px)" />