css - 不同大小的浏览器的不同 css 样式

Question

我有一个样式表用于 @media screen 和 (max-width:639px)

当它在 639px 以上时，它指的是我的默认 CSS 代码，这就是我想要的。但是当屏幕低于 667px 时，我想隐藏两个元素。

换句话说，当屏幕在 639px 和 667px 之间时，我希望使用 .class{ 从中删除两个元素来显示默认 CSS显示:无。

我尝试了 min-width:666px、max-width:667px 和其他几种变体，但我无法让它工作。

这是我的 blog :

这是我的 CSS 文件:Link

body {
    background-color:#CEDEAF;
    color:#111530;
    font-size:16px;
    overflow-y:scroll;
    margin:auto;
    font-family:'Noto Sans', Arial, sans-serif;
    line-height:2;
    letter-spacing:1px
}
img, iframe {
    border:none;
    max-height:100%;
    max-width:100%;
    display:inline-block;
    vertical-align:top;
    padding:.75%
}
header {
    text-align:center
}
a {
    text-decoration:none;
    color:#C33125
}
a:hover {
    text-decoration:none;
    color:#111530
}
h1, footer a {
    color:#111530
}
footer a:hover {
    color:#C33125
}
a:hover img {
    opacity:.8
}
hr {
    border:none;
    height:1px;
    background-color:#ddd
}
header img {
    position:relative;
    padding:0;
    margin:auto;
    nopin:nopin
}
.follow {
    position:absolute;
    top:.5%;
    right:0;
    margin-right:3%
}
#main {
    margin:0 auto;
    background-color:#fff;
    width:95%
}
#Blog1 {
    padding:1%
}
h1 {
    margin:0;
    font-size:1.3em;
    text-transform:uppercase;
    text-align:center;
    margin-bottom:1%
}
.homelist {
    text-align:center;
    margin-top:-.75%
}
.homelist img {
    width:30%
}
.left img {
    float:left;
    margin-right:20px
}
.center, .videopost, .breadcrumb, footer {
    display:block;
    text-align:center
}
.videopost img {
    width:1px;
    position:absolute
}
ul {
    list-style-position:inside
}
.staticpagelist ul, .imagetextlist ul {
    margin-left:-40px
}
.staticpagelist ul li, .imagetextlist ul li {
    display:inline-block;
    text-decoration:none;
    padding:1.5%;
    text-align:center;
    vertical-align:top;
    font-size:.8em;
    width:30%
}
.staticpagelist ul li {
    font-size:.85em;
    font-weight:700
}
.sub {
    margin:1% auto;
    font-weight:700;
    text-transform:uppercase;
    padding:.75%;
    border-top:1px solid #ddd;
    border-bottom:1px solid #ddd
}
.hcard, .hcard a {
    color:#aaa
}
.hcard, footer {
    font-size:.7em;
    font-weight:700
}
.breadcrumb {
    font-size:.8em
}
.menu {
    text-align:center;
    font-weight:700;
    padding-bottom:.5%
}
.related-posts-widget ul {
    height:250px;
    overflow:hidden
}
.related-posts-widget ul li {
    width:13%
}
footer {
    margin:1%
}
@media screen and (max-width:639px) {
    h1, .sub {
        font-size:.9em
    }
    header img, .homelist img, iframe {
        width:90%
    }
    #main {
        width:98%
    }
    .mobilesquish img, .staticpagelist ul li {
        width:47%
    }
    .breadcrumb {
        margin-bottom:2%
    }
    .follow, .related-posts-widget, .hcard, .remove {
        display:none
    }
}

Answer 1

试试这个

@media screen and (min-width: 639px) and (max-width: 667px) {
    //css here display: none
}