本節書摘來自華章社群《響應式web設計：html5和css3實踐指南》一書中的第2章，第2.11節基于相對字型大小的按鈕，作者（美） benjamin lagrone，更多章節内容可以通路雲栖社群“華章社群”公衆号檢視
2.11 基于相對字型大小的按鈕
在一些場景下，響應式的按鈕字型也是必需的。網站的移動版就是很好的例子。當在iphone中檢視一個正常按鈕時，往往發現其太小而不易點選。結果就是，對移動裝置的疏忽，帶給使用移動裝置的使用者非常糟糕的使用者體驗。
2.11.1 準備工作
本節中所介紹的方法是使用新的字型尺寸機關rem。通過本方法，使用移動裝置通路的使用者能夠看到更大的響應式的按鈕字型。
rem是css3引入的新字型尺寸機關。是root em的簡寫，意即相對于根元素的字型大小。而em是相對于父元素的字型大小，是以二者是有差別的。一種使用場景是在某些元素中使用rem，讓其獲得相對于整個body基本字型大小的值。
2.11.2 實作方式
該方法通過@media查詢的方式為桌面裝置及移動裝置建構響應式的按鈕。下面就是具體的實作步驟。
下一步需要建立@media查詢，以期适應移動裝置及兩個不同大小的桌面裝置視窗。在此為桌面裝置添加額外的@media查詢的目的在于，即使無法通路移動裝置，也能立即觀察到響應式的效果。
為大小為1024px和1280px的桌面裝置建立@media查詢，同樣為移動裝置設定兩個@media查詢，均為max-device-width: 480px，但是為了适應橫豎屏，其中一個為orientation:landscape，另一個為orientation:portrait。
現在如果通過移動裝置檢視該頁面，就能發現rem字型大小機關如何相對于設定的基本字型建立新的字型。在移動裝置上，可能會出現字型太小而很難辨識，同時按鈕又太小而不易使用的情況。将你的移動裝置從豎屏轉換為橫屏，馬上就能發現按鈕及其字型大小發生了變化。
對比移動裝置版本和桌面裝置版本的實作，會發現在每一個不同的裝置下面，按鈕的屬性值均有所差別。如果将桌面裝置浏覽器視窗在1024px和1280px之間縮放的時候，同樣會發現按鈕的字型有所變化。
2.11.3 工作原理
字型大小機關rem建立了一個字型大小，該字型大小是相對于在html或body元素中的已經聲明的基本字型大小而言的，如果未聲明基本字型大小，則是相對于内建字型大小的。而通過@media查詢的方式則能在不同裝置和不同方向下給出實作相對字型大小的解決方案。