是否可以在768px分辨率下添加<a>元素？

有沒有辦法到超鏈接的表格中添加一個文本用戶（以下768px的iPad，iPhone）？

像：

<td>Lorem Ipsum</td>

但隨後，低於768px我想補充一點：

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

這可能嗎？

來源

2013-08-25 Luis Serrano

你試過'最大寬度：768px;溢出-x：省略號？ – DevlshOne

您是否嘗試過使用jQuery？ – MisterBla

看看[這個問題]（http://stackoverflow.com/questions/14287299/conditional-behaviour-with-window-width）及其答案。 –

一個簡單的方法是：

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

另一種方法是如果您檢測到客戶端寬度爲< 768px，但在Javascript中添加鏈接，但這有點複雜（您必須使用DOM，beh。）

來源

2013-08-25 15:22:37

爲了完整：您可以使用[媒體查詢]（https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries）通過CSS檢查尺寸。 – bfavaretto

嗨，這是正確的方式。添加2個相同的元素，然後隱藏其中一個。謝謝！ –

如果我明白你問的是正確的，你想要一個鏈接只顯示給用戶的平板電腦？有很多方法可以解決這個問題。您可以使用JavaScript來確定屏幕分辨率，或者您可以使用CSS媒體查詢。

我會建議看看響應式佈局框架。 Twitter的「Bootstrap」就是其中的一個例子，但還有更多選擇！ Bootstrap擁有CSS類，只能在平板電腦上顯示內容。

來源

2013-08-25 15:24:29 PlusPlus

沒有跡象表明整個框架在這裏是必要的。現在只需簡單的媒體查詢規則就沒有問題。 – Brad

這是你在找什麼？

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


}

來源

2013-08-25 16:13:29 26ph19

是否可以在768px分辨率下添加<a>元素？

回答

相關問題