在WordPress中使用wp_enqueue_style配置多媒介CSS文件的问题

首先，你当前的写法存在两个关键问题：

• 重复使用了同一个handle（mainstyle）：WordPress的wp_enqueue_style要求每个样式文件必须有唯一的handle标识，重复使用会导致后面的样式覆盖前面的，直接引发部分设备样式加载失败。
• 未处理样式依赖关系：你的自定义响应式样式应该依赖基础框架（比如Bootstrap）和主题基础样式，这样能保证加载顺序正确，避免样式冲突。

下面是正确的实现方式，把你所有的样式通过wp_enqueue_style规范引入，同时完整保留媒体查询规则：

步骤1：在主题的functions.php中添加样式加载函数 #

function my_theme_enqueue_styles() {
    // 引入Bootstrap（仅需加载压缩版，无需同时引入未压缩文件）
    wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/bootstrap-4.3.1-dist/css/bootstrap.min.css', array(), '4.3.1', 'all' );
    
    // 引入Font Awesome图标库
    wp_enqueue_style( 'font-awesome', get_template_directory_uri() . '/font/font-awesome-4.7.0/css/font-awesome.min.css', array(), '4.7.0', 'all' );
    
    // 引入主题基础样式（style.css），依赖Bootstrap和Font Awesome
    wp_enqueue_style( 'theme-base-style', get_template_directory_uri() . '/style.css', array('bootstrap', 'font-awesome'), '1.1', 'all' );
    
    // 移动端专属样式（0px - 576px），依赖主题基础样式
    wp_enqueue_style( 'theme-mobile', get_template_directory_uri() . '/css/mobile.css', array('theme-base-style'), '1.1', 'screen and (min-width: 0px) and (max-width: 576px)' );
    
    // 小平板专属样式（576px - 768px）
    wp_enqueue_style( 'theme-minitablet', get_template_directory_uri() . '/css/minitablet.css', array('theme-base-style'), '1.1', 'only screen and (min-width: 576px) and (max-width: 768px)' );
    
    // 平板专属样式（768px - 992px）
    wp_enqueue_style( 'theme-tablet', get_template_directory_uri() . '/css/tablet.css', array('theme-base-style'), '1.1', 'only screen and (min-width: 768px) and (max-width: 992px)' );
    
    // 桌面端专属样式（992px - 1350px）
    wp_enqueue_style( 'theme-desktop', get_template_directory_uri() . '/css/windows.css', array('theme-base-style'), '1.1', 'only screen and (min-width: 992px) and (max-width: 1350px)' );
}
// 挂载到WordPress的样式加载钩子
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

关键细节说明 #

• 唯一Handle标识：每个样式的第一个参数（如bootstrap、theme-mobile）都是唯一的，彻底避免样式覆盖问题。
• 依赖关系设置：第三个参数array()用来指定当前样式依赖的其他样式handle，比如theme-mobile依赖theme-base-style，确保基础样式先加载，响应式样式后生效。
• 媒体查询直接复用：第五个参数就是你原link标签中的media属性值，直接填入即可，WordPress会自动渲染对应的媒体规则。
• 版本号控制：第四个参数是样式的版本号，更新样式时修改版本号可以强制浏览器刷新缓存，避免用户看到旧样式。
• 冗余文件清理：Bootstrap只保留压缩版（bootstrap.min.css）即可，减少不必要的HTTP请求，优化加载速度。

验证生效方法 #

打开浏览器开发者工具（F12），切换到Elements标签查看页面head部分，你会看到所有样式都被正确引入，且每个样式的media属性完全匹配你设置的设备尺寸规则。

内容的提问来源于stack exchange，提问作者Ms Programmer