[ 모바일 뷰 ]레이아웃 세팅 하기

프로젝트 시작에 앞서 우리는 모바일 웹 우선으로 진행하기로 해서
vscode 에서 레이아웃을 모바일웹으로 설정해야 한다고 한다

일단 우리가 정한 표준 규격을 살펴보자

모바일 반응형은 가로 미니멈사이즈 375, 맥시멈 600이다

600px이 넘어가면 600px인 최대 화면을 보여주고
600px이하면 375인 화면을 보여준다

media query를 사용하여 뷰포트 설정

모바일 뷰를 우선으로 개발하려면

min-width

를 사용해야한다.

그 반대로 데스크탑 뷰를 개발하려면

max-width

로 설정해야한다

적용방법

media ( min-width: 375px )and ( max-width: 600px ) {
  /*375이상 600으로 넘어가는 화면*/
  html {
    font-size: 1rem;
    background-color: blue;
  }
}

375px 이상 600px 이하인 뷰는 배경컬러를 블루로 바꿨다 !

이렇게 내 뷰를 600px 이하로 줄였을 때 확인하는 방법은

구글 개발자 모드에서 휴대폰 화면처럼 생긴곳을 누르면 된다 ! 😲

@media ( min-width: 600px ) {
  /*600이상으로 넘어가는 화면*/
  html {
    font-size: 1rem;
    background-color: aquamarine;
    border: 1px solid black;
    width: 600px;
  }
}

600px 이상인 기기로 접속했을때는
배경색이 아쿠아마린 , 넓이는 600px 로만 보이게 하였당 !

완성 !

• 이후 에이블리 pc화면처럼 화면을 가운데로 정렬하고싶다..!

#️⃣ 화면 가운데 정렬

margin: 0 auto;

를 추가 했더니 잘 된다 ~!