html - 正确使用@media？

Question

我正在完成我制作的网站的工作，但它需要针对不同分辨率的一些单独的 CSS 代码。这是我目前在 .css 文件中的内容:

@media screen and (min-width: 1000px) (max-width: 1366px) {
.button{
    background-color: blue;
}
}

按钮的背景颜色是我目前拥有的唯一元素，用于测试代码是否有效。但显然，它没有，我不知道我做错了什么。

简单地说:如果分辨率在 1000 像素到 1366 像素之间，我想做的是将按钮的背景颜色更改为蓝色。

所有其他 CSS 都能正常工作，因此与 HTML 页面的链接是正确的，.button 类也能正常工作。

我应该在此代码中更改什么才能达到这个目的？

Answer 1

A media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Media queries, added in CSS3, let the presentation of content be tailored to a specific range of output devices without having to change the content itself.

正确代码:

@media screen and (min-width: 1000px) and (max-width: 1366px) {
    .button{
        background-color: blue;
     }
}

Some example of media query