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

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)"

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