本文共 1044 字，大约阅读时间需要 3 分钟。

适配不同设备，对应不同的CSS默认情况下，媒体查询的范围为“所有屏幕”。为了实现跨设备适配，可以通过媒体查询（@media）来针对不同设备应用不同的CSS样式。

外部导入CSS你可以通过两种方式实现：第一种是通过link标签导入，例如：

第二种方式是使用@import导入外部CSS文件，例如：

@media screen {
    @import url(screen.css);
}
@media print {
    @import url(print.css);
}

在同一个CSS文件中进行多媒体查询的设置你可以按照以下方式实现：

@media screen and (min-width: 100px) {
    /* 设置适用于宽度大于等于100px的屏幕 */
}

针对宽度在100px到1000px之间的屏幕，你可以设置：

@media screen and (min-width: 100px) and (max-width: 1000px) {
    /* 设置适用于宽度在100px到1000px之间的屏幕 */
}

如果需要针对横屏设备或宽度在100px到1000px之间的屏幕设置，可以使用以下方式：

@media screen and (min-width: 100px) and (max-width: 1000px) and (orientation: landscape) {
    /* 设置适用于横屏且宽度在100px到1000px之间的屏幕 */
}

对于宽度不在100px到1000px范围内的屏幕，你可以使用以下查询：

@media not screen and (min-width: 100px) and (max-width: 1000px) and (orientation: landscape) {
    /* 设置适用于宽度不在100px到1000px范围内但仍为横屏的屏幕 */
}

针对低端浏览器的处理你可以使用以下方式：

@media only screen and (min-width: 100px) and (max-width: 1000px) and (orientation: landscape) {
    /* 设置仅适用于宽度在100px到1000px之间且为横屏的低端浏览器 */
}

通过以上方式你可以针对不同设备和屏幕尺寸设置相应的CSS样式，从而实现跨设备的响应式设计。