跳至內容
Astera Technology

CSS 轉版條件與文字

視窗與容器條件、方向對應及可讀溢出。

Astera Technology

桌面兩欄、手機一欄,閱讀次序要一致

指示先、結果後;手機和桌面版面都沿用這個閱讀次序。

實用教學
Astera Technology

同一視窗內,元件也可以各自轉版

視窗闊,不代表元件也闊;按自己的容器尺寸,決定要不要分欄。

實用教學
Astera Technology

轉版臨界點,要試剛好前後一像素

除了手機和桌面,還要試 599、600、601px,核對臨界點有沒有寫錯。

實用教學
Astera Technology

字體隨視窗變大,也要有上下限

在三個視窗闊度量度 clamp(20px,4vw,36px),看何時用下限、比例值和上限。

實用教學
Astera Technology

間距跟閱讀方向走,別寫死左右

把 inline-start、inline-end 內距對應到實際左右;改方向時,間距也跟住換邊。

實用教學
Astera Technology

長網址或檔名換行,字元仍要完整

180px 內顯示連續識別碼,靠換行讀完,不用省略號或裁字。

實用教學
Astera Technology

闊表格只捲表格,整頁仍可直讀

保留 600px 資料表,窄畫面只在表格區橫捲,整頁不被撐闊。

實用教學