取决于方向的CSS

Question

如果屏幕宽度小于或大于600px，我需要不同的CSS规范。

这适用于桌面，其中width返回浏览器窗口的宽度。但是，对于智能手机和平板电脑，无论设备位于device-width还是{{1}，device-heigth，width，height和portrait都相同} orientation !!

我想通过以下规范解决这个问题

landscape

但这不起作用。我仍然必须包括桌面规格。这真的可以吗？怎么做？

Answer 1

您可以使用max-device-width和max-device-height代替max-width和max-height。这取决于视口，您自动支持具有分屏支持的移动设备。

.my-class {
    /* styling for small */
}

@media (min-width: 640px) {
    .my-class {
          /* styles for medium */
    }
}

@media (min-width: 92px) {
    .my-class {
          /* styles for large */
    }
}

提示：尝试遵循Mobile First方法。对于这种方法，您可以通过视口获得的更大规则来增强您的风格。