跳到主要內容
  • 字級
:::|

1.4.10 CS2141003E 使用CSS寬度、最大寬度和彈性容器(flexbox)屬性調適標籤和輸入

稽核評量碼

CS2141003E

對應成功準則

1.4.10

對應認證等級

AA

對應國際技術碼

C38

類別

CSS

訊息

使用CSS寬度、最大寬度和彈性容器屬性調適標籤和輸入

英文訊息

C38: Using CSS width, max-width and flexbox to fit labels and inputs

規則說明

因螢幕空間限制,標籤與輸入框水平並列,將改變為垂直對齊,必須遵守此方式。

調適標籤和輸入的基本方法:

  1. 使用flexbox屬性和特定視埠大小的媒體查詢(media query)定義佈局區域的大小,以便它們在可用空間中放大、縮小或換行並響應縮放級別;
  2. 將佈局區域放置在flexbox容器中作為一行相鄰的flexbox項目,這些項目可以根據需要換行,其方式與段落換行中的單詞大致相同。
  3. 定義標籤和輸入的width和max-width屬性,以便它們在可用空間中放大或縮小並響應縮放級別。

檢測說明

程序

  1. 在能夠進行400%縮放的使用者代理中顯示網頁,並將視埠尺寸(以CSS像素為單位)設置為1280寬和1024高。
  2. 放大400%。
  3. 對於垂直滾動內容,所有標籤和輸入都適合其可用空間而無需水平滾動。

注意:

如果瀏覽器無法縮放到400%,您可以按比例縮小瀏覽器的寬度。例如,在300%縮放時,視埠的大小應為960px寬。

預期結果

檢查#3為是。

說明