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

1.4.8 CS3140801C 需有CSS樣式規則使用百分比數值或相對長度單位來設定欄寬,且最大欄寬不得超過80個字母(中日韓語系的40個文字)

檢測碼

CS3140801C

對應成功準則

1.4.8

對應認證等級

AAA

對應國際技術碼

C20

類別

CSS

訊息

需有CSS樣式規則使用百分比數值或相對長度單位來設定欄寬,且最大欄寬不得超過80個字母(中日韓語系的40個文字)

英文訊息

C20: Using relative measurements to set column widths so that lines can average 80 characters or less when the browser is resized
C24: Using percentage values in CSS for container sizes

規則說明

如果設定欄寬的標籤存在且對應的CSS內的width屬性值不為空並以相對尺寸為單位或max-width屬性值不超過80個字母的寬度或以相對尺寸為單位,通過檢測,否則檢測失敗。

範例

範例1:
HTML程式碼部分
<div id="main_content">
<p>今天天氣真好</p>
</div>

CSS 部分
#main_content {max-width: 70em;}

 

範例2:
HTML程式碼部分
<div id="main_content">
<p>今天天氣真好</p>
</div>

CSS 部分
#main_content {width: 90%;}

說明

範例1說明:
HTML程式碼部分
<div>是用來設定區塊的標籤,可以透過CSS設定文字與圖片的間距。 存在設定最大欄寬的標籤<div>,main_content為識別碼名稱。

CSS 部分
對應的CSS內的max-width尺寸使用em相對尺寸,在調整瀏覽器顯示尺寸後,區塊寬度也會依照顯示比例進行調整。

 

範例2說明:
HTML程式碼部分
<div>是用來設定區塊的標籤,可以透過CSS設定文字與圖片的間距。存在設定最大欄寬的標籤<div>,main_content為識別碼名稱。

CSS 部分
對應的CSS內的max-width尺寸使用%相對尺寸,在調整瀏覽器顯示尺寸後,區塊寬度也會依照顯示比例進行調整。