Question

我是网络设计新手，但基本上我有一个用于移动的样式表和一个用于在Dreamweaver中制作的平板电脑尺寸，我遇到的问题是，平板电脑css规则覆盖了移动样式表规则。我知道订单在我列出它们时很重要，但是为什么它不会从一个样式表切换到另一个样式表，具体取决于屏幕尺寸。

在我的索引页面中我实现了它。

<!-- Mobile -->
<link href="css/mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-   width:800px)" />
<!-- Tablet -->
<link href="css/tablet.css" rel="stylesheet" type="text/css" media="only screen and (max-width:1024px) and (min-width:801px;)" />

这是我在两个不同样式表中的规则

▼

这是我的手机：

    article{
        color: white;
        border-radius: 10px;
        border: 2px solid white;
        max-width: 400px;
        background-color: rgba(255, 255, 255, .1);
        font-family: Georgia, "Times New Roman", Times, serif;
        padding: 5px 10px 8px 15px;
    }   

    img{
        max-width:100%;
    }

    #desktop_img{
        float:left;

        padding:0;
        margin:0 auto;
    }
    #welcome{
        float:left;
        max-width:90%;
        padding:0;
        margin:0;
    }

    #welcome{
        text-align:center;
    }

    #hobbies{
        max-width:90%;
        float:left;
        margin-bottom: 5.0em;
    }

    #hobbies h1 {
        text-align:center;
    }

这是我的平板电脑：

    article{
        color: white;
        border-radius: 10px;
        border: 2px solid white;
        max-width: 400px;
        background-color: rgba(255, 255, 255, .5);
        font-family: Georgia, "Times New Roman", Times, serif;
        padding: 5px 10px 8px 15px;
        margin-left: auto;
        margin-right: auto;
    }

    img{
        max-width:100%;
    }

    #desktop_img{
        float:left;
        padding-left:20%;
        margin-left: auto;
        margin-right: auto;
    }
    #welcome{
        float:left;
        max-width:100%;
        padding-left:20%;
        margin-left: auto;
        margin-right: auto;
    }

    #welcome{
        text-align:center;
    }

    #hobbies{
        float:left;
        max-width:100%;
        margin-bottomg: 5.0em;
        margin-left: auto;
        margin-right: auto;
        padding-left:20%;
    }

    #hobbies h1 {
        text-align:center;
    }

Answer 1

HTML很挑剔，请尝试

更改

media="only screen and (max-   width:800px)"
media="only screen and (max-width:1024px) and (min-width:801px;)"

要

media="only screen and (max-width: 800px)"
media="only screen and (max-width: 1024px) and (min-width: 801px)"

如果所有其他方法都失败了，请检查开发工具以查看正在应用的内容。如果浏览器不知道你在说什么，它就会无声地失败。

Answer 2

＆＃34; min-width：801px后的分号;＆＃34;导致你的问题。删除它应该可以解决您的问题。

<link href="css/tablet.css" rel="stylesheet" type="text/css" media="only screen and (max-width:1024px) and (min-width:801px)" />

工作示例： http://codepen.io/anon/pen/okteL （更改视口大小以查看正文更改颜色）

此外，您可能希望以您的方式查看不使用独占媒体查询。它会导致很多重复的代码，这些代码难以维护（加载速度较慢）。例如，目前如果您想要更改文章的背景颜色，则必须在2个位置更改它，即使它在任何宽度都应该相同。

我建议先决定是先设计移动设备还是桌面设备，然后再使用媒体查询覆盖，只更改其他屏幕尺寸的代码。

更多信息： http://css-tricks.com/logic-in-media-queries/

为什么一个样式表覆盖另一个样式表

2 个答案: