css - 使用媒体查询调整元素大小不起作用

Question

我正在构建一个必须在“小”屏幕 (1024*768) 或更高分辨率屏幕上运行的应用程序。

我在应用程序中有一个页面，其中一些元素分两列显示。但是在“小”屏幕上，元素的宽度太大而无法保持良好的布局，所以我想将列数减少到一列。这些列是使用包含 <ul> 和 <li> 属性的 float:left 构建的(这实际上是一个 jQuery Sortable 插件输出)。

我的页面行为是允许用户在“源”列表和“目标”列表之间拖放元素以选择元素(这是可行的，如果有帮助，我可以粘贴代码)。

为了解决这个问题，我尝试设置了一个媒体查询。

在我的 css 文件中我有:

.sourceItems, .targetItems {
    list-style-type: none;
    float: left;
    margin: 0;
    padding: 0;
    margin-right: 10px;
    background: #eee;
    padding: 5px;
    border: solid 1px black;
    height: 400px;
    overflow: auto;
}

.sourceItems {
    width: 530px;
}

.targetItems {
    width: 280px;
}

    .sourceItems li, .targetItems li {
        border: solid 1px black;
        float: left;
        margin: 4px;
        padding: 4px;
        width: 220px;
        min-height: 10px;
        cursor: move;
        background-image: url('/_layouts/images/personresult.gif') !important;
        background-repeat: no-repeat !important;
        padding-left: 20px;
        background-color: #DFEFFC;
        background-position: left center !important;
    }

        .sourceItems li.user, .targetItems li.user {
        }

        .sourceItems li.entity, .targetItems li.entity {
            background-position: left center;
            border: solid 1px black;
            float: left;
            margin: 4px;
            padding: 4px;
            width: 200px;
            background-image: url('/_layouts/images/peopletitle.png') !important;
            font-size: 1.1em;
            height: 50px;
            cursor: move;
            padding-left: 40px;
            background-color: #CCFF99;
            background-repeat: no-repeat !important;
            vertical-align: middle;
        }

@media screen and (max-width: 1024) {
    .sourceItems {
        width: 200px;
    }

    .targetItems {
        width: 200px;
    }

        .sourceItems li, .targetItems li {
            margin: 2px;
            padding: 2px;
            width: 180px;
            min-height: 10px;
            background-image: url('/_layouts/images/personresult.gif') !important;
            -moz-background-size: 50%;
            -o-background-size: 50%;
            -webkit-background-size: 50%;
            background-size: 50%;
            background-repeat: no-repeat !important;
            padding-left: 10px;
            font-size: 1.1em;
        }

            .sourceItems li.user, .targetItems li.user {
            }

            .sourceItems li.entity, .targetItems li.entity {
                -moz-background-size: 50%;
                -o-background-size: 50%;
                -webkit-background-size: 50%;
                background-size: 50%;
                margin: 2px;
                padding: 2px;
                width: 180px;
                background-image: url('/_layouts/images/peopletitle.png') !important;
                font-size: 1.1em;
                height: 30px;
                padding-left: 20px;
            }
}

但是，这在页面加载时没有区别(元素总是大两列)。

不知道它是否有帮助，但这是 DOM 的转储(来自 IE 开发人员工具):

<UL class="sourceItems droptrue ui-sortable" jQuery172019945692622544986="151">
  <LI class="ui-state-default entity" jQuery172019945692622544986="75">some item 1</LI>
  <LI class="ui-state-default entity" jQuery172019945692622544986="76">some item 2</LI>
  <LI class="ui-state-default entity" jQuery172019945692622544986="77">some item 3</LI>
  <LI class="ui-state-default entity" jQuery172019945692622544986="78">some item 4</LI>
  <LI class="ui-state-default entity" jQuery172019945692622544986="79">some item 5</LI>
  <LI class="ui-state-default entity" jQuery172019945692622544986="80">some item 6</LI>
  <LI class="ui-state-default entity" jQuery172019945692622544986="81">some item 7</LI>
  <LI class="ui-state-default entity" jQuery172019945692622544986="82">some item 8</LI>
</UL>
<UL class="targetItems droptrue ui-sortable" jQuery172024919617247411335="152"></UL>

这是“大屏幕”输出的屏幕截图:

这是带有“小屏幕”的输出屏幕截图:

这是“小屏幕”上所需输出的屏幕截图(使用 IE 开发工具调整 dom 以生成屏幕截图:

如果能帮助我解决这个问题，我将不胜感激。

Answer 1

您缺少长度前缀 px/cm/in in

@media screen and (max-width: 1024) {
                              ^^^^ // Missing px   

DEMO -(不工作)

应该是:

@media screen and (max-width: 1024px) {
                                  ^^ // Added px

DEMO -(工作)

SEE REFERENCE