Css 在移动设备上切换横向/纵向模式时出错

我正在制作一个适用于横向和纵向移动模式的模板，我必须“移除”一些对象，因为横向中没有空间，然后我使用display:横向中没有，并设置纵向的正常尺寸，但是当我进入手机时，并使切换横向纵向对象消失，即使在纵向模式

css结构大致如下：

@media screen (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) and (device-width: 1080px) and (orientation: portrait) {.object {width: ...; height: ...; top: ...; margin-left: - ...;}}


@media screen (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) and (device-width: 1920px) and (orientation: landscape) {.object {display:none}}

---

有什么建议吗？：）

在您的媒体查询中，您会说每个设备的

-webkit最小设备像素比为1.5

都会获得CSS属性

如果你只想在风景画和肖像画之间有所区别，你应该使用如下的东西：

@media only screen and (orientation: portrait) {.object {width: ...; height: ...; top: ...; margin-left: - ...;}}


@media only screen and (orientation: landscape) {.object {display:none}}

---

不需要其他媒体查询。

除了这些，我还使用了另一个移动媒体查询，我无法概括。好的，没问题。您可以添加这些行，然后使用其他行进行更具体的媒体查询，或者您可以添加以下媒体查询：

@仅媒体屏幕和（方向：纵向）和（-webkit最小设备像素比：1.5）{.object{width:…；height:…；top:…；margin left:-…；}

感谢您的解决方案，但是我得到了同样的错误，即使在javascript中也有一个解决方案，它不会在两个方向上删除元素？经过几次尝试，我认为这是不同设备css媒体查询的继承问题，我不知道它们为什么相互依赖，有什么方法可以让它们不依赖吗？或者你可以将我向你展示的查询放在css文件的末尾（最后一个css文件），这样它就不会被其他规则覆盖。或者您可以添加

！重要信息

到规则，因此不应覆盖它：

.object{display:none！重要信息；}