css 媒体同时限制宽和高

CSS媒体查询可以根据设备的特点（如屏幕尺寸和方向）来应用不同的样式。同时，我们也可以使用CSS来限制元素的宽度和高度。那么如何在媒体查询中同时限制元素的宽度和高度呢？下面我们来介绍一下。

@media (max-width: 768px) and (max-height: 1024px) {
  .Box {
    width: 50%;
    height: 50%;
  }
}

代码中的@media (max-width: 768px) and (max-height: 1024px)为媒体查询的语法，表示在宽度不超过768像素，高度不超过1024像素的设备上应用下面的样式。

.Box为需要限制宽和高的元素的类名（可以根据实际情况进行修改），在上述代码中，我们将宽度和高度均限制为50%。这样在符合媒体查询条件的设备上，显示该元素时会自动按照限制的宽高比例进行缩放。

需要注意的是，在编写CSS样式时，同时限制元素的宽度和高度可能会对响应式布局造成影响，不同的情况可能需要使用不同的限制方式。因此，我们需要根据实际需求进行综合考虑。