PostCSS VPX to VW - Unit Effect Comparison Demo

vpx width: 100vpx;

maxvpx width: 100maxvpx;

minvpx width: 100minvpx;

cvpx width: 100cvpx;

linear-vpx width: linear-vpx(100, 300, 768, 1440);

Element size is 100px at 768px viewport width, linearly increasing to 300px at 1440px

↔

⚙️ Parameter Configuration

Base Viewport: 768px

Test Value: 300vpx

maxRatio: 1.2

minRatio: 0.8

clampMinRatio: 0.7

clampMaxRatio: 1.5

📏 linear-vpx Configuration

Min Value: 200px

Max Value: 450px

Min Viewport: 768px

Max Viewport: 1440px

📈 Responsive Curve Chart