メディアクエリーのデバッグ:CSSコードの順序を継承

13499 ワード
media query テキストリンク

コード順序


私がやりたいのは、検索結果の履歴を以下に表示させる機能です.だからこのようにコードを書きました.
 <div class="history">
        <ul class="list">
            <div class="1">
                <a href="/detail?job=thor">thor</a>
                <button>❌</button>
            </div>
            <div class="1">
                <a href="/detail?job=thor">thor</a>
                <button>❌</button>
            </div>
            <div class="1">
                <a href="/detail?job=thor">thor</a>
                <button>❌</button>
            </div>
            <div class="1">
                <a href="/detail?job=thor">python</a>
                <button>❌</button>
            </div>
        </ul>
    </div>
</body>
@media (max-width:500px) {

	.history > .list {
		grid-template-columns: repeat(3,35%);
		grid-template-rows: repeat(2,50%);
		grid-auto-rows: 50%;
		grid-row-gap: 31%;
		grid-column-gap: 0%;
	}


.history .list {
    display: grid;
    margin: 1% 13%;
	grid-template-columns: repeat(6,16%);
    grid-template-rows: repeat(2,50%);
	grid-auto-rows: 50%;
	grid-row-gap: 50%;
	/* grid-column-gap: 1%; */
    padding-left: 0px;
}
反応型にするためにmediaqueryを使用した.しかし,反応型操作が必要な場合,効果は適用されないため,開発者ツールを表示する際にmediaqueryが無視されていることが分かった.以前にもこんな問題があったので、解決して、メモを忘れて、この機会にメモしたいと思っていました.


もとはmediaqueryの後ろにhistoryに対する効果cssコードがあったので、mediaquery効果は後ろのデフォルトhistory cssコードによってキャンセルされました.
したがって、デフォルトの履歴コードはmediaqueryの前に宣言され、デフォルトではこのコードが実行され、mediaqueryは後ろに書かれ、オプションとして実行されます.
.history .list {
    display: grid;
    margin: 1% 13%;
	grid-template-columns: repeat(6,16%);
    grid-template-rows: repeat(2,50%);
	grid-auto-rows: 50%;
	grid-row-gap: 50%;
	/* grid-column-gap: 1%; */
    padding-left: 0px;
}

@media (max-width:500px) {

	.history > .list {
		grid-template-columns: repeat(3,35%);
		grid-template-rows: repeat(2,50%);
		grid-auto-rows: 50%;
		grid-row-gap: 31%;
		grid-column-gap: 0%;
	}
このようにすれば,実行に移した.
Missing Semester - (2)
dom操作