Temeller

Kırılma noktaları

Altı eşik. Adlar cihaz değil içerik anlatıyor — pencere genişliği sayfada ölçülüyor.

@media

Kırılma noktalarıaltı adım · adlar cihaz değil içerik anlatır

xs560pxsingle column · cards drop their border

sm720pxshell navigation lifts · side panel goes full width

md900pxtwo columns become one · the secondary column hides

lg1080pxthe sidebar collapses

xl1200pxthree columns become two

2xl1400pxthe widest desktop layout

Bunlar CSS değişkeni olamıyor: @media sorgusu var() okumaz. Bu yüzden ölçek burada değer olarak değil kural olarak duruyor — sorgular yalnızca bu altı sayıyı yazıyor. Öncesinde 16 ayrı eşik vardı ve 820 ile 860'ın farkını hiçbir karar açıklamıyordu.