javascript - 是否可以添加低于 768px 分辨率的元素？

Answer 1

一个简单的方法是：

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

如果.visible-pc分辨率display:none< 768px 和相同.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，beh。）

Answer 2

如果我理解您的要求正确，您希望链接仅显示给平板电脑用户吗？有很多方法可以解决这个问题。您可以使用 javascript 来确定屏幕分辨率，也可以使用 CSS 媒体查询。

我建议查看响应式布局框架。Twitter 的“Bootstrap”就是其中的一个例子，但还有更多可供选择！Bootstrap 具有仅在平板电脑上显示内容的 CSS 类。

Answer 3

这是你想要的？

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


}