以圖一訂單的資料為範例，電腦版螢幕解析度較大的情況下，是可以呈現表格多個欄位的，但如果原封不動地將表格搬到手機，勢必會有超出螢幕的部分，
這時候隱藏不必要的資訊就是響應式設計的要點之一。
以圖二、圖三來看，可以透過斷點的設計，在解析度小於 569px 時，開啟 display: none; 的語法，並且在對應的元素上面加上 .m-none 的 class 名稱。
手機版在調整過後，電腦版的 "編號"、"管理欄位" 皆被隱藏，最後呈現4個欄位的表格，如圖四。
但如果希望保留全部的欄位時呢 ?
在實務上我們很可能需要保留每一個欄位，但手機螢幕不能一次呈現整個表格時，我們可以替表格加上一個容器，並設定 overflow-x: auto; ，也就是當表格超出螢幕水平範圍時，下方會出現 x 軸給使用者滑動觀看內容，這樣不僅表格以外的區塊不會受影響，還可以呈現完整的內容。
若表格內的字被壓縮無法水平呈現，只需要調整表格的 width 即可，如圖五。
透過框架 Pure.css 更了解網頁元素
按鈕 ( buttons ) 設計細節
- 針對瀏覽器的兼容性做調整。
- 針對 hover ( 滑鼠滑過 )、focus ( 被點選之後 )、active ( 按住不放 ) 的樣式設計。
- 像是 focus 的時候
outline: 0;，去除預設的外框線 - 像是 active 的時候可以增加陰影設計
box-shadow
3. disable ( 滑鼠滑過時不可被點選 ) 的狀態。常被應用在表單驗證的時候，像是某些欄位沒被寫好、email 欄位寫錯、或是身分證 / 密碼強度不夠時，此時送出按鈕暫時不可被點擊。
表單 ( forms ) 設計細節
- 表單的種類
type，常見的有 text、password、email、date、number、tel、radio、checkbox，其他還有 url、month、time、week、color、search、datetime、datetime-local 等等 - 針對 focus ( 滑鼠點擊在欄位上 )、hover 的設計
disable的狀態，不可選取也不可編輯的狀態readonly的狀態，可以選取也可以複製內容，但不可編輯，常用在像是註冊過的帳號不可被更改，只可被讀取的時候使用- 擅用
display: block;技巧，可以使表單元素呈現上到下的排版方式，而非並排呈現 - 當加入了 pure.css 的表單至自己網頁後，如果需要更改樣式，可以透過在表單外層增加一個
div並自己新增 class 去覆蓋，盡量不要動到原本的 pure.css 的設計 - 文字欄位並非只有
type="text”，像是在設計表單的時候，常用的 email、電話、數量等，如果都設定 text 的話，使用者每輸入一個欄位時，輸入法預設跳至英文，這樣可能會降低使用者填寫完表單的慾望，因此各欄位的表單種類設計也是相當重要的。( 有些較舊的瀏覽器沒支援 html5 的表單種類，則自動會切換成 text 的種類 )
如果覺得我的文章寫得不錯或是有幫助到你，可以拍手讓我知道，對我來說是很大的鼓勵，謝謝:)
