DedeCMS モバイル設計ガイドとヒント

@media screen and (max-width: 768px) {
    /* 小さな画面デバイスのスタイル */
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    /* 中画面デバイスのスタイル */
}

@media screen and (min-width: 1025px) {
    /* 大画面デバイスでのスタイル */
}

<img src="image.jpg" alt="image"   style="max-width:90%">

document.getElementById("element").addEventListener("touchstart", function(e) {
    //タッチ開始時の処理
});

document.getElementById("要素").addEventListener("タッチムーブ", function(e) {
    // タッチ時や移動時の扱い
});

document.getElementById("要素").addEventListener("タッチエンド", function(e) {
    //タッチ終了時の処理
});

<div class="menu">
    <button class="menu-toggle">メニュー</button>
    <ul class="メニューリスト">
        <li><a href="#">メニュー項目 1</a></li>
        <li><a href="#">メニュー項目 2</a></li>
        <li><a href="#">メニュー項目 3</a></li>
    </ul>
</div>

<スタイル>
/* CSS スタイル */
.menu {
    ディスプレイ: フレックス;
    フレックス方向: 列;
    整列項目: 中央;
}

.menu-toggle {
    表示ブロック;
    背景: #333;
    色: #fff;
    パディング: 10px 20px;
}

.menu-list {
    表示: なし。
}

.menu-list.active {
    表示ブロック;
}
</スタイル>

<スクリプト>
document.querySelector('.menu-toggle').addEventListener('click', function() {
    document.querySelector('.menu-list').classList.toggle('active');
});
</script>