Css 元件的响应性设计

如何使具有类属性的元素显示为笔记本电脑和台式机的

内联块

，以及平板电脑和手机的列表

每当我缩小浏览器的宽度时，iPad的设计元素就不合适

.properties{
显示：内联块；
}
@媒体屏幕和（最小设备宽度：1200px）和（最大设备宽度：1600px）以及（-webkit最小设备像素比：1）{
.物业{
显示：内联块；
}
.属性按钮{
显示：内联块；
}
}
@介质（最大宽度：900px）{
.物业{
显示：列表项；
列表样式类型：无；
}
.属性按钮{
利润上限：-2%；
左缘：30%；
}
}

添加属性
名称
名称
名称
需要（TE）：
添加
删除

有时，您只需复制代码即可。 对于尺寸超过1200的窗口，保留内联块视图。

---

当你在1200以下时，只需隐藏它并显示一个新的列表？

我认为你的CSS有点错误-据我所知，媒体查询不应该像那样嵌套。更像你想要的

.properties {
    display: inline-block;
}

@media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) {
    .properties {
        display: inline-block;
    }
    .propertyButton {
        display: inline-block;
    }
}

@media screen and (max-width: 900px) {
    .properties {
        display: list-item;
        list-style-type: none;
    }
    .propertyButton {
        margin-top:-2%;
        margin-left: 30%;
    }
}

---

你能提供一个屏幕截图，或其他视觉澄清吗？我不相信我完全理解这个问题。然而，对于500到780之间的屏幕，我需要一个类似桌子的显示器。两列布局