CSS 轉版條件與文字
視窗與容器條件、方向對應及可讀溢出。
桌面兩欄、手機一欄,閱讀次序要一致
指示先、結果後;手機和桌面版面都沿用這個閱讀次序。
同一視窗內,元件也可以各自轉版
視窗闊,不代表元件也闊;按自己的容器尺寸,決定要不要分欄。
轉版臨界點,要試剛好前後一像素
除了手機和桌面,還要試 599、600、601px,核對臨界點有沒有寫錯。
字體隨視窗變大,也要有上下限
在三個視窗闊度量度 clamp(20px,4vw,36px),看何時用下限、比例值和上限。
間距跟閱讀方向走,別寫死左右
把 inline-start、inline-end 內距對應到實際左右;改方向時,間距也跟住換邊。
長網址或檔名換行,字元仍要完整
180px 內顯示連續識別碼,靠換行讀完,不用省略號或裁字。
闊表格只捲表格,整頁仍可直讀
保留 600px 資料表,窄畫面只在表格區橫捲,整頁不被撐闊。