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

1.4.10 CS2141001E 使用CSS彈性容器(flexbox)重排內容

稽核評量碼

CS2141001E

對應成功準則

1.4.10

對應認證等級

AA

對應國際技術碼

C31

類別

CSS

訊息

使用CSS彈性容器重排內容

英文訊息

C31: Using CSS Flexbox to reflow content

規則說明

使用Flexbox Layouts讓布局區塊可根據流動排版後的需要,在螢幕上顯示布局區塊。創建在不同裝置和使用者偏好的不同縮放而可良好呈現的設計,必須遵守此方式。

檢測說明

程序

  1. 在能夠進行400%縮放的使用者代理中顯示網頁,並將視埠尺寸(以CSS像素為單位)設置為1280寬和1024高。
  2. 放大400%。
  3. 對於水平讀取的內容,檢查所有內容和功能是否可用而不進行水平滾動。
  4. 對於垂直讀取的內容,檢查所有內容和功能是否可用而不進行垂直滾動。

注意:

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

預期結果

#3和#4為是。

說明

參考資源

相關技術

  • C32: Using media queries and grid CSS to reflow columns