Responsive design 使用@media query的正确方法

我想在不同的屏幕尺寸上更改横幅的高度，目前我正在使用下面的代码片段

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1366px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

}

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {

}

但是这个代码会产生问题，当我更改横幅的

高度时，它也会更改为更大的屏幕

现在，我在谷歌上搜索这个，发现人们对媒体查询片段的不同回答和观点。下面是对我有用的，但它是固定大小的，我看到人们通常不使用固定范围，他们只使用
max
或
min
大小

@media only screen and (min-device-width : 340px) and (max-device-width : 355px) {}

我想知道什么是处理媒体查询的正确且经得起未来考验的方法。
请参阅下面的链接，您将找到几乎所有设备的媒体查询。这也是正确的方法

参考下面的链接，您将找到几乎所有设备的媒体查询。这也是正确的方法