我正在从头开始构建一个主题，我希望它对特定宽度以下的屏幕使用不同的样式表，以实现移动兼容性。我在header中使用了这个方法。php调用适当的样式表：

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/small.css" type="text/css" media="(max-width: 900px)" />
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/style.css" type="text/css" media="(min-width: 900px)" />

WordPress成功使用该样式。css文件，但当浏览器窗口缩小到足以调用“小”样式表时，一切都变得混乱：元素放错了位置，东西消失了，等等。

我知道问题不在于样式表本身，因为当应用于WordPress主题的静态HTML捕获时，它们工作得很好。据我所知，WordPress试图同时调用这两个电子表格，但它们相互冲突。

我猜这不是实现替代样式表的预期方式。。。？

@media only screen and (max-device-width: 700px) {
    <rules for smaller screens go here>
}