Responsive Web Page Support: Applying a Screen-Shrinking Technique Using the vw Unit

To reduce web page design bugs across various mobile devices, a method was adopted to linearly shrink the entire page on screens smaller than the base size. By utilizing the vw unit to scale element sizes proportionally to the screen width, the minimum font size issue across browsers that occurred with the rem approach was bypassed.

The existing rem approach caused unintended layout collapse in WebKit-based browsers such as Safari and Chrome due to the CJK locale minimum font size (12px) restriction. The zoom property is non-standard and thus unsupported in Firefox, and transform: scale was excluded due to the complexity of scroll area calculations.

Ultimately, logic to automatically convert px values to vw was implemented via a Sass mixin. The forceMediaMerge option of CSSO was used to merge duplicate media queries during the build, and zoom: 0.5~0.6 was applied in landscape mode to improve readability.