我有以下规则：
@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 */
如何在不影响其他规则的情况下捕捉平板肖像？
就设备像素宽度而言，“平板电脑肖像”没有标准。
@mediaorientation查询根本不是很可靠，也没有得到广泛支持。 看这里。 你最好只使用媒体查询min-width并max-width尝试让它在所有可能的宽度上工作，而不是针对特定方向。无论如何，这几乎就是响应式设计的工作方式。
纵向模式平板电脑的宽度通常在 768px 到 ~960px 之间。
@media only screen and (min-width: 768px) and (orientation:portrait) and (min-height:1024px)
除了指定 min-width 和 min-height 之外，还应该指定 max width 和 height 与方向相结合，然后你真的赶上了手机而不影响其他人，如平板电脑或 pc，现在只有手机的 min-width 也会影响所有设备满足最小宽度
它用于平板电脑的媒体查询如下：
@media (min-width: 768px) and (max-width: 979px)
您也可以尝试添加(orientation:portrait)。