メディアクエリを書くときは、HTMLのheadもしくはCSSに記述する方法が一般的ですね。WordpressでHTMLの方法を使う場合は「header.php」もしくは「functions.php」のいずれかで設定する必要があります。
header.php
header.phpでは下記のようになります。
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/sp.css" media="screen and (max-width: 768px)">
functions.php
一方でfunctions.phpでは下記のようになります。
wp_enqueue_style('sp_style', get_template_directory_uri() . '/css/sp.css', array(), false, 'all and (max-width: 768px)');
header.phpからfunctions.phpへの記述に変えたとき、参考サイトがあまり見つからなかったのでまとめました。
CSSの「@import」や「@media screen and (〇〇-width: 〇〇px)」を使うときは意識していませんでしたが、ファイルを分けたときにはこの方法がよさそうです。