当其余的时候不应用单个 CSS 媒体查询

Question

我在媒体查询中有几种样式，但从未应用过一种，这是为什么？ 例如，我的字体大小正确更改，但#contact的宽度始终为 40%。

    font-size: 10px;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
}

@media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 480px){

    html {font-size: 6px;}
    
    .masthead-text > h2 { visibility: hidden; }


    #contact { width: 80%; }
    input, textarea { font-size: 32px; }

}


#contact {
    width: 40%;
    margin: 0 auto;
}

.form-group {
    text-align: center;
}

input {
    width: 97.7%;
    margin-top: 1em;
}

textarea {
    width: 100%;
    margin-top: 1em;
}


#submit {
    width: 50%;
    margin-left: 25%;
}

<html lang="en">
<head>
    <meta charset="utf-8">
    <link href="styles.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>L's Landscaping</title>
</head>
<body>
    <header>
     ...
    </header>
    <main>
        <section id="about">
        </section>
        <h1>Drop us a line!</h1>
        <section id="contact">
                <form id="real-form">
                    <div class="form-group">
                        <input type="text" id="Name" placeholder="Your Name" required>
                    </div>
                    <div class="form-group">
                        <input type="email" id="Email" placeholder="Your Email Address" required>
                    </div>
                    <div class="form-group">
                        <input type="tel" id="Phone" placeholder="Your Phone Number" required>
                    </div>
                    <div class="form-group">
                        <textarea id="Message" rows="10" maxlength="1000" placeholder="Your Message" required></textarea>
                    </div>
                    <input id="submit" type="submit">
                </form>
        </section>
    </main>
</body>
</html>

Answer 1

尝试使用max-width和min-width而不是max-device-width和min-device-width 。

媒体查询规范模块的第 4 级不推荐使用显示设备的渲染表面的宽度。

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

当其余的时候不应用单个 CSS 媒体查询

问题描述

1 个解决方案

解决方案1
2 2020-11-03 23:53:32

当其余的时候不应用单个 CSS 媒体查询

问题描述

1 个解决方案

解决方案1 2 2020-11-03 23:53:32

解决方案1
2 2020-11-03 23:53:32