有沒有適當的方法來做出響應文字？

我經常讓設計師給我響應式設計，其中元素的措辭基於屏幕的大小而改變。有沒有適當的方法來做出響應文字？

桌面：瞭解更多
移動：閱讀

桌面：下載PDF
移動：出口

桌面：點擊這裏
移動：點擊此處

在移動版和桌面版網站中使用不同文本的正確方法是什麼？

來源

2014-10-09 Koviko

您可以使用JavaScript，也可以使用媒體查詢根據分辨率顯示或隱藏頁面上的某些元素。 – TylerH 2014-10-09 13:02:48

沒有人「正確的方式」。這一切都取決於你必須與之合作。 – j08691 2014-10-09 13:03:45

您可以使用引導響應實用程序來非常簡單明瞭地實現您所需要的功能。檢查：http://getbootstrap.com/css/#responsive-utilities – artuc 2014-10-09 13:04:39

你可以使用媒體查詢，僞類和一些別出心裁此：

a[data-mobiletext] { 
 
    background-color: #FC0; 
 
} 
 
@media screen and (max-width: 700px) { 
 
    a[data-mobiletext] { 
 
     background-color: #CF0; 
 
    } 
 
    a[data-mobiletext] span { 
 
     display: none; 
 
    } 
 
    a[data-mobiletext]:after { 
 
     content: attr(data-mobiletext); 
 
    } 
 
}

<a href="/" data-mobiletext="Read"><span>Read more</span></a> 
 
<a href="/" data-mobiletext="Export"><span>Download PDF</span></a> 
 
<a href="/" data-mobiletext="Tap here"><span>Click here</span></a>

點擊「整頁」查看桌面版本。

來源

2014-10-09 13:21:11

這種純CSS的方法非常乾淨。我很想知道是否有辦法讓寬度自動符合自己。考慮到文本是在CSS中設置的，手動設置寬度不應該是一個大問題。但不需要的話就好了。 – Koviko 2014-10-09 13:29:19

將鏈接文本包裹在span元素中，以便通過CSS進行操作更加輕鬆。我馬上修改我的答案。 – 2014-10-09 13:43:44

CSS生成的文本不會被屏幕閱讀器發佈，所以使用這種技術，AT用戶根本就沒有任何文本。 – steveax 2014-10-09 14:45:38

有一對夫婦的我用過，在這裏客戶也提出了類似的請求方法（而不是被談論出來的*）：

1）使用JavaScript根據屏幕寬度來改變文字/設備檢測方法;

2）將默認文本設置爲您的首選項，並將其包裝成一個範圍或類似文本，使用您認爲所有設備上最好的文本（最好根據優先級選擇SEO /內容/屏幕閱讀器），然後使用僞選擇器例如：之前的內容：''屬性根據媒體查詢設置替代文字。根據需要隱藏默認的跨度/元素。

（*）我會說考慮你的內容，看看你是否能找到這些物品的通用標籤可能是更好的做法。

來源

2014-10-09 13:05:42 steve

腳註上的榮譽;） – 2014-10-09 13:08:19

謝謝 - 我們都在那裏提供這些請求......所以希望能有所幫助:) – steve 2014-10-09 13:12:59

有沒有適當的方法來做出響應文字？

回答

相關問題