我有以下规则：
@media only screen and (min-device-width : 320px) and (max-device-width : 480px)
@media only screen and (min-width : 321px) /* Smartphones (landscape) */
@media only screen and (max-width : 320px) /* Smartphones (portrait) */
@media only screen and (min-width: 768px) /* tablets and desktops */
如何在不影响其他规则的情况下捕捉平板电脑肖像？
答案 0 :(得分：2)
就设备像素宽度而言，“平板电脑肖像”没有标准。
@media orientation查询根本不可靠，并且没有得到广泛支持。 See here.您最好只使用min-width和max-width媒体查询，并尝试让它以所有可能的宽度工作，而不是针对特定的方向。这就是响应式设计应该如何运作。
纵向模式平板电脑通常介于768px和~960px之间。
答案 1 :(得分：1)
@media only screen and (min-width: 768px) and (orientation:portrait) and (min-height:1024px)
您还应该指定min-width和min-height指定最大宽度和高度将其与方向相结合，然后您真正赶上手机而不会影响平板电脑或PC等其他手机，现在只有手机的最小宽度也会影响所有符合min-width的设备
答案 2 :(得分：0)
Pure CSS has helper classes用于隐藏平板电脑中的内容。
它用于平板电脑的媒体查询如下：
@media (min-width: 768px) and (max-width: 979px)
您也可以尝试将(orientation:portrait)添加到其中。