Css 在媒体查询不起作用的情况下调整项目大小

我正在构建一个必须在“小”屏幕（1024*768）或更高分辨率屏幕上工作的应用程序

我在应用程序中有一个页面，其中有两列显示的一些项目。但是在“小”屏幕上，项目的宽度太大，无法保持良好的布局，因此我想将列数减少到一列。这些列是使用

构建的，包含

和

float:left

属性（这实际上是一个jQuery可排序插件输出）

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

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

在我的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开发者工具）：

某些项目1
某些项目2
某些项目3
某些项目4
某些项目5
某些项目6
某些项目7
某些项目8

以下是“大屏幕”输出的屏幕截图：

以下是“小屏幕”输出的屏幕截图：

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

---

我将非常感谢任何可能有助于解决此问题的帮助。

您在中缺少长度前缀

px/cm/in

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

-（不工作）

应该是：

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

-（工作）

---

中缺少长度前缀

px/cm/in

in

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

-（不工作）

应该是：

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

-（工作）

---

我看到这在您的示例中起作用，但在我的应用程序中没有。我有一些问题：1.如果定义规则（最大宽度），我是否还必须定义（最小宽度）？或者它处理某种默认样式，由自定义规则覆盖。2.我将我的

@media

规则放在css文件中。是否允许将@media规则放在与经典css规则相同的级别？或者我必须使用

@media

规则创建一个专用css文件？3.我不确定宽度规则适用于哪个元素。是否应用我的应用程序输出了一个

，使IE 9使用IE 8引擎进行渲染。IE 8不支持媒体查询，所以我的查询被忽略。我会看看我是否可以在应用程序中更改它，但这超出了这个问题的范围。无论如何，谢谢你的帮助回答。这实际上是解决方案的一部分。我看到这在您的示例中起作用，但在我的应用程序中不起作用。我有一些问题：1.如果定义规则（最大宽度），我是否还必须定义（最小宽度）？或者它处理某种默认样式，由自定义规则覆盖。2.我将我的

@media

规则放在css文件中。是否允许将@media规则放在与经典css规则相同的级别？或者我必须使用

@media

规则创建一个专用css文件？3.我不确定宽度规则适用于哪个元素。是否应用我的应用程序输出了一个

，使IE 9使用IE 8引擎进行渲染。IE 8不支持媒体查询，所以我的查询被忽略。我会看看我是否可以在应用程序中更改它，但这超出了这个问题的范围。无论如何，谢谢你的帮助答案。这实际上是解决方案的一部分