1

「小さな」画面（1024 * 768）以上の解像度の画面で動作する必要があるアプリケーションを構築しています。

アプリケーションに、2つの列にいくつかの項目が表示されているページがあります。しかし、「小さい」画面では、アイテムの幅が広すぎて適切なレイアウトを維持できないため、列の数を1つに減らしたいと思います。列はwith属性<ul>を使用して構築されます（これは実際にはjQueryのSortableプラグイン出力です）。<li>float:left

このページの動作は、ユーザーがアイテムを選択するために「ソース」リストと「ターゲット」リストの間にアイテムをドラッグアンドドロップできるようにすることです（これは機能しており、役立つ場合はコードを貼り付けることができます）。

この問題を解決するために、私はメディアクエリを設定しようとしました。

私の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;
            }
}

ただし、これはページの読み込み時に違いはありません（要素は常に2列の大きさです）。

それが役立つかどうかはわかりませんが、ここに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を微調整し、スクリーンショットを作成しました。

望ましい結果

この問題の解決に役立つ可能性のある助けをいただければ幸いです。

4

1 に答える 1

1

px/cm/inに長さのプレフィックスがありません

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

デモ-（機能していません）

そのはず：

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

デモ-（作業中）

参考資料を参照してください

于 2012-08-30T08:06:39.517 に答える