Question

基本问题：

有没有办法在桌面内向用户添加超链接（768px，iPad，iPhone以下）？

像：

<td>Lorem Ipsum</td>

但是，在768px以下我想补充一下：

<td>"<a href="#">"Lorem Ipsum"</a>"</td>

这可能吗？

Answer 1

一种简单的方法是：

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

如果分辨率为＆lt; .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; } }相同，但如果＆gt; 768px：

{{1}}

<小时/> 另一种方法是在Javascript中添加链接，如果您检测到clientWidth＆lt; 768px，但这有点复杂（你必须使用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;
    }


}

是否可以添加<a> element below 768px resolution?</a>

3 个答案: