html - 为什么在浏览器宽度减小时 CSS 属性没有被拾取？

Question

我有 CSS 文件，其中有用于响应式设计的媒体屏幕。但问题是一切正常，但 CSS 属性未被表 id=“phone”占用。

下面是我的代码。告诉我可能是什么问题。

@media  only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {
     /* table properties for phone  */
    table#phone thead, tbody, th, td, tr {
        display: block;
    }

    /* table properties for datepicker */
    table:(.ui-datepicker) table, thead, tbody, th, td, tr {
    display:none;
    }   

Answer 1

因为你的代码针对所有的td, th, tr, tbody。它应该像下面这样具体。

 @media  only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {
 /* table properties for phone  */
table#phone thead,
table#phone tbody,
table#phone th,
table#phone td,
table#phone tr {
    display: block;
}

/* table properties for datepicker */
table.ui-datepicker table,
table.ui-datepicker thead,
table.ui-datepicker tbody,
table.ui-datepicker th,
table.ui-datepicker td,
table.ui-datepicker tr {
display:none;
}