CSS-brytpunkter
När du använder standarddesigner kommer systemet att tillämpa olika brytpunkter vid växling mellan mobil, surfplatta och stationär dator. Brytpunkterna är:
Minimal
- Skärmstorlek under 321px bredd eller 321px höjd
- Teckenstorleken är justerad till 0.38
- Linjehöjden är justerad till 1.05 em
- Utfyllnad av lådan reduceras till 5px
- Skärmstorlek under 450x450: Box har ändrats till 100% 100%
Mobil: Porträtt
- Skärmstorlek under 480px bredd och 926px höjd
- Boxens bredd utökades till 100 % och min höjd på 300 px
- Knappar är placerade under innehållet
- Logotypen är dold
- Vadderingen är reducerad
- Ytterligare: Om skärmstorleken är mindre än 414x736 eller 736x414 (t.ex. iPhone 6/7/8), reduceras stoppningen på kartongen
Mobil: Landskap
- Skärmstorlek under 926px bredd och 480px höjd
- Boxens bredd utökades till 100 % och min höjd på 150 px
- Knappar placeras på höger sida av innehållet med en bredd på 250px
- Logotypen är dold
- Vadderingen är reducerad
- Ytterligare: Om skärmstorleken är mindre än 414x736 eller 736x414 (t.ex. iPhone 6/7/8), reduceras stoppningen på kartongen
Desktop & surfplatta
- Skärmstorlek över 926x480 eller 480x926
Ytterligare mediafrågor
Lager placerade som "bottom/full width", "top/full width" och "Push down":
- Maxbredd 1500px: Innehållet (rubrik, text och syften) i samtyckeslagret kommer att reduceras till "100 % - 450px" för att visa knapparna till höger om innehållet.
- Maxbredd 1200px: Innehållet (rubrik, text och syften) i samtyckeslagret kommer att reduceras till "100 % - 250px" för att visa knapparna till höger om innehållet. Detta
- Maxbredd 800px: Innehållet (rubrik, text och syften) i samtyckeslagret utökas till 100 % för att visa knapparna under innehållet.
Lager placerade som "bottom/right", "bottom/center", "middle/center" och "top/center":
- Maxbredd 600px: Boxen har ändrats till 100 % bredd.
Lager placerade som "mitten/mitten":
- Max-höjd 600px och min-bredd 926px: Boxen har ändrats till full höjd och innehållet är inställt på flex med överflödesautomatik för att förhindra att boxen blir för hög för fönstret.
Lager placerade som "höger/full höjd" och "vänster/full höjd":
- Maxbredd 400px: Boxen har ändrats till 100 % bredd.
Sidan med anpassade inställningar:
