如何在CSS中为iPad和平板电脑设置纵向和横向方向的媒体查询

Question

当我使用此代码（见下文）时，媒体查询不起作用

@media (min-width: 768px) and (orientation : portrait) { //scss code }

但是当我删除'和（方向：纵向）部分时，它可以工作。即

//this code works
@media (min-width: 768px) { //scss code }

如何为CSS中的纵向和横向方向的Ipad和Tablet设置媒体查询？

PS：我正在为Web编码一个响应式布局，并且正在使用scss mixins（不知道这是否会影响任何东西。）

Answer 1

尝试此代码

    @media screen and (min-width: 768px) and (max-width: 992px) { 
    /* STYLES HERE */
    }