Question

为拟合平板电脑定义的媒体查询确实改变了一些属性，但它对其他一些属性没有任何反应。请参阅下面哪些工作正常，哪些工作正常。

AugmentedRealityView

这里是顶部容器的HTML的一部分作为参考：

// MEDIA FOR TABLET SIZE

@media (min-width: 375px) and (max-width: 768px){

main{

    .top{

        .top-right{
            display: none;   // Works fine
        }

        .top-left{
            background-color: white; // Works fine
            width: 20%;                // DOESNT WORK
            align-items: center;

            .top-left-content{
                margin-left: 0px;
            }

        }
    }


    .bottom{
        background:white;           // DOESNT WORK

        .bottom-left{
            display: none;            //works fine
            width: 100%;              //DOESNT WORK
            background-color: red;  //Works fine
        }


    }
 }


}

Answer 1

检查firefox或chrome中的元素以查看样式的来源 - 如果是这种情况，可能会显示您在其他位置覆盖了它们，并且您无法更改可以添加的覆盖样式！重要的是这样 -

.top-left{

        background-color: white; 
        width: 20% !important;               
        align-items: center;

另外，正如评论中指出的那样，如果你隐藏了一个带有display：none的元素，那么增加width的目的是什么：100％和background-color：red; ？

Answer 2

需要使用重要或在课前使用Body

val dtf = DateTimeFormat.forPattern("yyyy-MM-dd")
(0 until 5).map(now.minusDays(_)).foreach(d=>dtf.parseDateTime(d.toString))

媒体查询仅适用于某些属性

2 个答案: