javascript - レスポンシブ動的html

Question

メディアの幅が 726px よりも小さい場合、変更する html 要素を作成するにはどうすればよいですか?

たとえば、1 つの画像があり、メディアの幅が 726px 未満の場合に別の画像に変更したいとします。

Answer 1

css が有効になるように設定します。726px

@media screen and (max-width: 726px) {
   background-image: url(image-med.png);
}

@media screen and (min-width: 727px) {
   background-image: url(image-big.png)
}

Answer 2

低解像度のスタイルを別の css ファイルにバンドルすることをお勧めします。このファイルは、html の head セクションに次のリンクを含めることで有効にできます。

    <link rel="stylesheet" media="only screen and (max-width:726px)" href="your-low-res-styles.css" title="norrowscreen" />

あなたの質問について：「htmlを変更する方法はありますか...」：コードにmatchMediaリスナーを含めます：

if (window.matchMedia !== undefined) {
    var mq = window.matchMedia("(max-width: 726px)");
    mq.addListener(onWidthChange);
    onWidthChange(mq);
}
function onWidthChange(mq) {
    if (mq.matches) {
        $("#img0").attr("src", url1);
    } else {
        $("#img0").attr("src", url2);
    );
};

Answer 3

@media only screen and (max-width: 726px){
#div{  background-image: url(image-1.png)}
}
@media only screen and (min-width: 727px){
#div{  background-image: url(image-2.png)}
}