Question

我在我页面的<head>内添加了这些媒体查询：

<style type="text/css">

    @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px) {
        @import url('assets/css/style-smartphones.css');
    }

    /* iPads (portrait and landscape) ----------- */
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) {
        @import url('assets/css/style-tablet.css');
    }

    /* Desktops and laptops ----------- */
    @media only screen 
    and (min-width : 1224px) {
        @import url('assets/css/style-desktop.css')
    }

</style>

但未加载样式表文件。我仔细检查了路径，它们是正确的...... 我错过了什么？

Answer 1

以我自己的方式修复：

    @import url('assets/css/style-smartphones.css') only screen 
            and (min-device-width : 320px) and (max-device-width : 480px);
    @import url('assets/css/style-tablet.css') only screen 
            and (min-device-width : 768px) and (max-device-width : 1024px);
    @import url('assets/css/style-desktop.css') only screen 
            and (min-width : 1224px);

如何编写媒体查询

1 个答案: