폰트 사이즈(rem단위)를 통한 자동 반응형 사이즈 변환 스크립트

[필수]연관문서

jQuery Code

const fontResponsive = () => {

            let bodyFontSize = 16;

            let maxWidth = 750;

            let calc = 0;

            let currentWidth = $(window).width();

            //alert(11)

            if (currentWidth > maxWidth) {

                $('html').css({

                    fontSize: bodyFontSize

                })

            } else {

                console.log(22)

                calc = currentWidth / maxWidth * 16;

                $('html').css({

                    fontSize: calc

                })

            }

        };

        fontResponsive();

        $(window).resize(function () {

            fontResponsive();

        });

Vanilla JS Code

document.addEventListener('DOMContentLoaded', () => {

    const fontResponsive = () => {

        let bodyFontSize = 16;

        let maxWidth = 750;

        let calc = 0;

        let currentWidth = window.innerWidth;

        let rootHtml = document.querySelector('html');

        if (currentWidth > maxWidth) {

            rootHtml.style.fontSize = bodyFontSize + 'px';

        } else {

            console.log(22);

            calc = (currentWidth / maxWidth) * 16;

            rootHtml.style.fontSize = calc + 'px';

        }

    };

    fontResponsive();

    window.addEventListener('resize', fontResponsive);

});

위 스크립트로 자동 변환된 값으로 디자인 변경 없이 컨트롤이 가능해집니다.

이미지의 경우에는 각각의 이미지 원본의 사이즈를 max-width에 rem으로 변환하여 넣어주어야 완벽하게 동작되는것을 확인 하실 수 있습니다.

특히 position이 absolute인 경우 px단위로 하게 되면 top, left, right, bottom 등이 처음 세팅한 디바이스와 사이즈가 다른 디바이스에 적용되게 되면 위치값이 틀어져 곤란해 질 수 있습니다.