Responsive

Last updated: 19 days ago

Achieves multi-device responsiveness through various methods: width adaptation via @media min/max-width queries, adaptive styling with classes like _xxs-1/_xs-2, mobile device adaptation via @media an...

Responsive19 days ago

Mobile and Non-Mobile Device Adaptation

Desktop devices have hover events while mobile devices don't. This framework uses @media any-hover for mobile and non-mobile device adaptation queries.

     
    //Mobile devices
    @media (any-hover: none) {}
    //Desktop computers
    @media (any-hover: hover)  {}

Browser Width Adaptation

We focus on the browser's viewport. When the viewport becomes smaller, auxiliary content on both sides should be hidden, and navigation should change to show at least one button to reveal hidden content.

The main content area should display at full width. Multi-column layouts should automatically adjust to fewer columns or even single-column display.

This framework uses @media min/max-width for width adaptation queries.

     
    //Small screens
    @media screen and (max-width: 599) {}
    //Large screens
    @media screen and (min-width: 1200) {}

Width Breakpoints

This framework follows the mobile-first principle for multi-device responsiveness - designing interfaces from small to large, with mobile interfaces as the default, then expanding to other devices via @media queries.

Research shows 600px, 900px, 1200px, 1536px, 2500px, and 3800px are key device boundaries that clearly distinguish small and large screens.

Breakpoint	Range	Device Type	Example Device
xxs	0-599px	Phones, small industrial screens	iPhone 15 (390px)
xs	600-899px	Regular tablets portrait, low-res phones landscape	iPad Mini portrait (600px)
sm	900-1199px	Regular tablets landscape, high-res phones landscape, HD tablets portrait	iPad Pro
md	1200-1535px	HD tablets landscape	Samsung A9+
lg	1536-2499px	Office monitors (1920px), laptops (125% zoom => 1536px), other scaled HD screens	Philips 221V8LB
xl	2500-3799px	2K office monitors (2560px), scaled 4K screens (150%)	AOC G4
xxl	≥3800px	4K office monitors (3840px)	Samsung UJ59

Additionally, there are three major breakpoints:

Breakpoint	Range	Device Type	Full Name
hh	0-1536px	Handheld mobile devices (touch devices)	handheld device
dt	≥1536px	Desktop devices including laptops	desktop device
tb	600-1536px	Tablets (excluding phones and desktops)	tablet device

Breakpoint Applications

Framework Breakpoint Structure

This framework's CSS breakpoints combine min-width/max-width queries, hover queries and orientation queries.

     
//Phones and phone landscape
@media (max-width:599px),
(min-width: 600) and (max-width: 899px) and (orientation:landscape) {
}
//Tablets portrait
@media (min-width: 600px) and (max-width:899px) and (orientation: portrait) {
}
//Regular tablets landscape & HD tablets portrait
@media (min-width: 900px) and (max-width: 1199px) {
}
//HD tablets portrait or landscape
@media (min-width: 1200px) and (max-width:1535px) and (hover:none) {
}
//Desktop computers and laptops, regular screens
@media (min-width: 1200px) and (max-width:1535px) and (hover:hover),
(min-width: 1356px) and (max-width:2499px) {
}
//Desktop computers, 2K screens
@media (min-width: 2500px) and (max-width:3799px) {
}
//Desktop computers, 4K screens
@media (min-width: 3800px) {
}
//Desktop devices
@media (min-width: 1200px) and (max-width:1535px) and (hover:hover),(min-width: 1536px) {
}
//Handheld mobile devices
@media (max-width:1199px),(min-width: 1200px) and (max-width:1535px) and (hover:none) {
}
//Tablets (excluding phones)
@media (min-width: 600px) and (max-width: 899px) and (orientation: portrait),
(min-width: 900px) and (max-width:1199px),
(min-width: 1200px) and (max-width:1535px) and (hover:none) {
}

Determining Columns by Breakpoint

This framework uses grid and flex layouts, with breakpoints determining column counts across devices.

_xxs-[0-24]: 0-24 columns on phones
_xs-[0-24]: 0-24 columns on tablets portrait
_sm-[0-24]: 0-24 columns on tablets landscape
_md-[0-24]: 0-24 columns on HD tablets
_lg-[0-24]: 0-24 columns on desktops
_xl-[0-24]: 0-24 columns on 2K desktops
_xxl-[0-24]: 0-24 columns on 4K desktops
_dt-[0-24]: 0-24 columns on desktops
_hh-[0-24]: 0-24 columns on handheld devices
_tb-[0-24]: 0-24 columns on tablets (excluding phones)

     
    //Grid shows 1 column on phones, 2 on tablets, 3 on tablet landscape
    <div class="_grid _xxs-1 _xs-2 _sm-3"></div>
    //Flex shows 1 column on phones, 2 on tablets, 3 on tablet landscape
    <div class="_row _xxs-1 _xs-2 _sm-3"></div>

Breakpoint-Based Hiding

This framework provides hiding methods across devices:

_hide-xxs: Hide on phones
_hide-xs: Hide on tablets portrait
_hide-sm: Hide on tablets landscape
_hide-md: Hide on HD tablets
_hide-lg: Hide on desktops
_hide-xl: Hide on 2K desktops
_hide-xxl: Hide on 4K desktops
_hide-dt: Hide on desktops
_hide-hh: Hide on handheld devices
_hide-tb: Hide on tablets (excluding phones)

Split Layout Cancellation

Complex desktop layouts using flex and grid often show multi-column designs, but this may not work well on mobile where single-column flow layouts (block) are better. The split class addresses this.

This class can break existing layouts and restore block flow layout on specific devices: