NssResponsive
Responsive scaling system that adjusts font-size based on screen width. NUI
Getting Started
NssResponsive sets the font-size of the <html> element proportionally to the screen width. At 1920px, font-size is 100% (= 1rem = 16px). The scaling is linear — wider screens get larger values, narrower screens smaller.
import {NssResponsive} from "nui://nss_libs/ui/NssResponsive/NssResponsive.js";
new NssResponsive();
// Done — font-size is now responsiveConstructor
new NssResponsive()
Initializes the responsive system. Sets the font-size immediately and attaches a debounced resize listener.
new NssResponsive();How It Works
The component calculates: font-size = (window.outerWidth / 1920) * 100%
This means:
- At 1920px screen width:
font-size: 100%→1rem = 16px - At 1280px screen width:
font-size: ~66.7%→1rem = ~10.7px - At 2560px screen width:
font-size: ~133.3%→1rem = ~21.3px
Using --1rpx for Pixel-Based Scaling
The CSS custom property --1rpx represents a responsive pixel. Use it to convert pixel values from a 1920px design:
.my-element {
width: calc(600 * var(--1rpx)); /* 600px at 1920, scales proportionally */
padding: var(--20rpx); /* 20px at 1920, scales proportionally */
border-radius: var(--5rpx); /* 5px at 1920 */
}Using rem for Fonts
Use rem for font sizes — they automatically scale with the responsive system:
.my-text {
font-size: 1rem; /* 16px at 1920 */
font-family: rdr_crock, sans-serif;
}Available Fonts
| Font Family | File |
|---|---|
rdr_crock | crock.ttf |
rdr | chineserocks.ttf |
Methods
.initialize()
Called automatically by the constructor. Can be called manually to re-initialize after DOM changes. Guards against double-initialization.
Returns undefined
// Normally not needed — constructor handles this
responsive.initialize();.updateScreenWidthFactor()
Recalculates and applies the font-size factor. Called automatically on resize.
Returns undefined
// Normally not needed — resize listener handles this
responsive.updateScreenWidthFactor();Events / Callbacks
None. The component operates automatically via a resize event listener (debounced at 100ms).
CSS
Custom Properties (:root)
| Property | Value | Description |
|---|---|---|
--1rpx | calc(1rem / 16) | Base responsive pixel unit |
--5rpx | calc(var(--1rpx) * 5) | 5px equivalent |
--7rpx | calc(var(--1rpx) * 7) | 7px equivalent |
--10rpx | calc(var(--1rpx) * 10) | 10px equivalent |
--15rpx | calc(var(--1rpx) * 15) | 15px equivalent |
--20rpx | calc(var(--1rpx) * 20) | 20px equivalent |
--25rpx | calc(var(--1rpx) * 25) | 25px equivalent |
--30rpx | calc(var(--1rpx) * 30) | 30px equivalent |
--35rpx | calc(var(--1rpx) * 35) | 35px equivalent |
--40rpx | calc(var(--1rpx) * 40) | 40px equivalent |
--50rpx | calc(var(--1rpx) * 50) | 50px equivalent |
--75rpx | calc(var(--1rpx) * 75) | 75px equivalent |
--100rpx | calc(var(--1rpx) * 100) | 100px equivalent |
--scrollbar-radius | var(--5rpx) | Default scrollbar border-radius |
--scrollbar-width | var(--10rpx) | Default scrollbar width |
Dependencies
NssUiComponentInterface— base class.NssHelper.debounceClocked— used for the resize listener.
Things to Know
TIP
All nss_libs UI components that extend NssUiComponent automatically initialize NssResponsive. You only need to call new NssResponsive() explicitly in your own app entry point.
Why not percentages?
Percentages are relative to the parent element, making calculations unpredictable in nested layouts. --1rpx is always relative to the screen width, regardless of nesting.
- Double-initialization is prevented via a
data-nss-response-initializedattribute on<html>. - The resize listener uses
debounceClocked(100ms)for performance — the first resize fires immediately, subsequent ones are throttled.