好久沒寫 CSS 的語法分享了 XXD，雖然現在主要都用 TailwindCSS 來開發網站，但那也是因為有良好的 CSS 基礎，才知道要快速使用哪些語法。

所以人不能忘本！！今天就來分享一些如何建立響應式 input 欄位的方法，讓你的表單可以在各種裝置上都顯得美觀、實用。

方法一：min() 函數

▼ 第一個方法使用 css 的 min 函數，min() 可以直觀且有效的控制 input 欄位的寬度，使其在不同的螢幕尺寸下都保持合適的比例。

<input type="text" style="width: min(100%, 15rem);">

min() 的使用方法

  • min(100%, 15rem) 表示 input 欄位的寬度會在 100% 和 15rem 之中，取較小的值。
  • 當父層寬度小於 15rem 時，input 的寬度會縮小至父層的 100%，確保它不會超出容器的邊界。
  • 當父層寬度大於 15rem 時，input 的寬度會保持在 15rem，避免欄位過大影響排版。

優點：

  • 語法簡單，容易理解與實作。
  • 如果用在大螢幕上，可以避免欄位過長的情況，可以保持欄位的整體比例。

缺點：

  • 因為語法過於簡單，所以當需要做複雜的寬度調整規則時，這種方法的彈性較小。

AD

方法二：display: flex

▼ 萬能的 flex 排版，可以實現更複雜的動態的寬度調整，特別是當我們有許多個元素需要做自適應時。

<div style="display: flex;">
  <input type="text" style="flex: 0 1 15rem;width: 100%">
</div>

flex 的使用方法

這段 CSS 語法的重點是 flex: 0 1 15rem，他 是 flex 的縮寫版，完整內容為：

  • 0 表示 flex-grow: 0，input 欄位的寬度，不會放大到超出它的初始寬度。
  • 1 表示 flex-shrink:1，input 欄位可以縮小以適應父容器的空間。
  • 15rem 表示 flex-basis: 15rem，表示 input 欄位的預設寬度。

優點：

  • 可以根據父層的寬度進行縮放，同時保持合理的初始寬度，讓整體彈性比較好。
  • 適合在有多個子元素的 flex 容器中，可以讓每個元素自適應地排列。

缺點：

  • 我覺得沒啥缺點 😂，但真要說的話就是相對於 min()，語法較複雜，而且一定需要將父層設為 flex 才能使用

方法三：max-width

▼ 這是我以往最常用的一個方式，我會使用 max-width 來控制最大寬度，同時設定 width 為 100% 來保持彈性

<input type="text" style="width: 100%; max-width: 15rem;">

這種方式讓 input 欄位在大螢幕上保持最大寬度為 15rem，而在較小的螢幕上則會縮小為父層的 100%。

優點

  • 簡單好上手
  • 有需要還能設定最小寬度，增加更多的控制

缺點

  • 我也覺得好像沒啥缺點，真要說可能是太簡單，看起來不厲害 (?

線上範例

我將這三個方法的程式碼都放到 codepen，大家可以移動紅點調整父層的寬度，來看 input 欄位的變化。

See the Pen Responsive CSS Font Size Utilities by MUKi (@mukiwu) on CodePen.

你也可以直接打開我的 Codepen 觀看完整範例：https://codepen.io/mukiwu/pen/LYwygrN