[Django Study 13] Mobile Responsive Layout

[모바일 디버깅, 반응형 레이아웃]

모바일 앱으로 접속하는 방법

• python manage.py runserver는 python manage.py runserver 127.0.0.1:8000와 같다.

코드 돌아가는 컴퓨터에서만 실행할 수 있다. 다른 device로는 불가능

• python manage.py runserver 0.0.0.0:8000으로 터미널에 치면, 다른 device에서도 접속 가능

#pragmatic/settings.py
ALLOWED_HOSTS = ['*']  #모든 호스트에 대해 허용을 한다. => 나중에 배포시에는 주의할것

• 현재, 모바일에서는 디자인이 예쁘게 되어있지 않다.

  ⇒ 아래와 같이 수정한다.

<!-- templates/head.html -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

shrink-to-fit=no는 firefox에 맞춘 설정이다.

initial-scale=1는 처음 스케일이 1이라는 뜻

width=device-width는 device width에 맞추어 간격을 맞추겠다는 뜻이다.

• 이후 css를 약간 수정한다.

/* static/base.css */
@media screen and (max-width:500px) {
    html {
        font-size: 13px;
    }
}

일정 크기 이하가 되면, font-size도 조금 줄어들게 만든다.

---

---

[출처] 작정하고 장고! Django Pinterest 따라만들기 : 바닥부터 배포까지

섹션 7. Mobile Responsive Layout (39강)

https://www.inflearn.com/course/%EC%9E%A5%EA%B3%A0-%ED%95%80%ED%84%B0%EB%A0%88%EC%8A%A4%ED%8A%B8/dashboard