[Sass/SCSS]반응형 웹을 효율적으로 작성하기 위한 방법($font-size : px to vw)

1. $break-point & @mixin 사용하기

반응형 웹을 작성할 때 일반적으로 나누는 $break-point는 1200px, 992px, 768px, 576px이다. 이 기준이 대중적으로 가장 많이 통용되는 기준이므로 반응형 웹을 작성할 때는 다음과 같이 작성하면 된다.(하지만 절대적인 기준은 아니다.)

 

//_responsive.scss
$break-point-xl: 1200px;//데스크탑
$break-point-lg: 992px;//태블릿 가로
$break-point-md: 768px;//태블릿 세로
$break-point-sm: 576px;//모바일


@use 'responsive' as r;

/*responsive*/
@mixin responsive_xl{
    @media screen and (max-width:r.$break-point-xl){
        /*1200px이하*/
        @content;
        
    }
}
@mixin responsive_lg{
    @media screen and (max-width:r.$break-point-lg){
        /*992px이하*/
        @content;
    }
}
@mixin responsive_md{
    @media screen and (max-width:r.$break-point-md){
        /*768px이하*/
        @content;
    }
}
@mixin responsive_sm{
    @media screen and (max-width:r.$break-point-sm){
        /*576px이하*/
        @content;
    }
}

 

2. px을 vw로 변환하면 코드 작성의 번거로움이 줄어든다.

$break-point마다 설정해 놨던 px사이즈를 다시 설정하는 방법도 있지만, 화면이 줄어들 때마다 font-size나 margin, padding 사이즈가 자연스럽게 줄어들게 웹을 만들고 싶다면 처음부터 vw로 변환해서 코드를 작성해도 된다. (혹은 % 를 사용한다)

https://it-news.pw/pxtovw/

PX to VW Calculator - Responsive values Converter

$font-size: 0.84vw, 0.9375vw, 1.25vw, 1.67vw, 3.34vw, 6.67vw, 7.8125vw;
/*16px, 18px, 24px, 32px, 64px, 128px, 150px*/

//px to vw 함수
$vw-viewport: 1920;
@function get-vw($font){
  $vw-context: $vw-viewport * 0.01 * 1px;
  @return $font / $vw-context * 1vw;
  @return $font;
}

.font20{
    font-size: get-vw(20px);
}

 

3. 반응형 웹에서 이미지 기본 설정

img{
	width:100%;
    max-width: $max-width;
    height:auto;
    //img는 부모 요소를 꽉 채우되, max-width 이상으로 커지지 않는다.

}