javascript - 768px以下の解像度で要素を追加することはできますか?

Answer 1

簡単な方法は次のとおりです。

 <td><span class="visible-pc">Lorem Ipsum</span>
     <span class="visible-sm">"<a href="#">"Lorem Ipsum"</a>"</span>
 </td>

解像度が < 768px.visible-pcのdisplay:none場合と同じ.visible-smですが、> 768px の場合:

.visible-pc { display: block; }
.visible-sm { display: none;  }

@media screen and (max-width: 768px) {
    .visible-pc { display: none;  }
    .visible-sm { display: block; }
}

---

別の方法として、clientWidth < 768px を検出した場合に Javascript でリンクを追加することもできますが、これはもう少し複雑です (DOM を操作する必要があります)。

Answer 2

これはあなたが探しているものですか？

<td><span class="d-text">Lorem Ipsum</span></td>
<td><span class="t-text">"<a href="#">"Lorem Ipsum"</a>"</span></td>

CSS

.d-text {
    display: block;
}

.t-text {
    display: none;
 }


@media only screen and (max-width: 768px), only screen and (max-device-width: 768px) {

    .t-text {
        display: block;
     }

    .d-text {
        display: none;
    }


}