在WordPress主题中实现响应式设计，主要是通过使用CSS媒体查询（Media Queries）来根据不同的设备屏幕尺寸应用不同的样式规则。以下是一些步骤和代码示例来帮助你在WordPress主题中实现响应式设计：

1. 定义媒体查询：
   在你的主题的style.css文件中，你可以定义不同的媒体查询来针对不同的屏幕尺寸。例如：

/* 基本样式 */
body {
    font-family: 'Arial', sans-serif;
}

/* 小屏幕设备（手机，小于768px） */
@media (max-width: 767px) {
    body {
        background-color: #f0f0f0;
    }
}

/* 中等屏幕设备（平板，大于等于768px 且 小于992px） */
@media (min-width: 768px) and (max-width: 991px) {
    body {
        background-color: #e0e0e0;
    }
}

/* 大屏幕设备（桌面显示器，大于等于992px） */
@media (min-width: 992px) {
    body {
        background-color: #d0d0d0;
    }
}

2. 使用JavaScript检测屏幕宽度：
   如果你需要在JavaScript中获取当前设备的宽度，你可以使用window.innerWidth或document.documentElement.clientWidth。以下是使用window.innerWidth的示例：

<script type="text/javascript">
    function checkDeviceWidth() {
        var width = window.innerWidth;
        console.log("Current device width is: " + width);
        // 根据宽度做相应的处理
        if (width < 768) {
            // 小屏幕设备
        } else if (width >= 768 && width < 992) {
            // 中等屏幕设备
        } else {
            // 大屏幕设备
        }
    }

    // 在页面加载时和窗口大小改变时检查设备宽度
    window.addEventListener('load', checkDeviceWidth);
    window.addEventListener('resize', checkDeviceWidth);
</script>

将上述JavaScript代码放置在主题的footer.php文件中，或者使用WordPress的wp_footer钩子来添加脚本。

3. 使用WordPress函数：
   如果你需要在PHP中检测设备宽度，这通常不是最佳实践，因为PHP代码运行在服务器端，而设备宽度是客户端的属性。不过，你可以通过在服务器端设置一些条件来提供不同的HTML或JavaScript，然后在客户端根据这些条件来应用样式。

在WordPress中，你可以使用以下函数来检测是否是移动设备：

function is_mobile() {
    return preg_match("/(android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|phone|pie|tablet|up.browser|up.link|webos|wos)/i", $_SERVER["HTTP_USER_AGENT"]);
}

if (is_mobile()) {
    // 为移动设备添加特定的样式或脚本
}

请记住，响应式设计主要依赖于CSS媒体查询，而JavaScript或PHP主要用于提供额外的功能或优化体验。在大多数情况下，你不需要在PHP中获取设备宽度，而是应该专注于编写有效的CSS媒体查询。