Question

如何将具有类属性的元素显示为笔记本电脑和台式机的inline-block以及平板电脑和手机列表？

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

.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 (max-width: 900px) {
  .properties {
    display: list-item;
    list-style-type: none;
  }
  .propertyButton {
    margin-top: -2%;
    margin-left: 30%;
  }
}

<div class="propertyWrapper" style="width:100%;">
  <div style="float:right">
    <span ng-click="addProperty()" class="button buttonPrimary pull-right">Add Property</span>
  </div>
  <div class="properties">
    <label>Name</label>
    <input type="text" />
  </div>
  <div class="properties">
    <label>Name</label>
    <input type="text" />
  </div>

  <div class="properties">
    <label>Name</label>
    <input type="text" />
  </div>
  <div class="properties">
    <label>
      IsRequired(TE):
    </label>

    <input type="checkbox" ng-model="property.TradeEarthRequired" name="UsedEquipmentPropertyList[0].TradeEarthRequired" class="ng-pristine ng-valid">
  </div>
  <div class="propertyButton">
    <span class="button primaryAction" ng-click="addProperty()">Add</span>
    <span class="button primaryAction" ng-click="removeProperty(property,$index)">Delete</span>
  </div>
</div>

Answer 1

有时，您只需复制代码即可。为大小超过1200的窗口保留内联块视图。当你不到1200时，只需隐藏它并显示一个新的清单？

Answer 2

我认为你的CSS有点不对 - 据我所知，媒体查询不应该像这样嵌套。 this JSFiddle更像你想要的吗？

.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%;
    }
}

元素的响应式设计

2 个答案: