django 27. 모바일 디버깅, 반응형 레이아웃

Mobile Debugging

• 반응형 디자인 모바일로 테스트

 

 python manage.py runserver 0.0.0.0:8080

• 모바일 접근시 host 허가되지 않음 error

 

Settings.py

ALLOWED_HOSTS = ['*']

• 모든 host에 대해 접근 허용함으로 수정

 

 

모바일 최적화 설정 추가

head.html

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

• 모바일 최적화 및 파이어폭스 설정 셋팅

 

list.html

<style>
.container {
    padding: 0;
    margin: 0, auto;
}

.container a {
    width: 45%;
    max-width: 250px;
}
</style>

• 모바일 반응형 css 추가 

 

base.css

@media screen and (max-width:500px) {
    html {
        font-size: 13px;
    }
}

• 모바일 반응형 css 설정 추가
• 스크린 사이즈가 500px 아래로 작아지면 해당 css 내용 적용

 

magicgrid.js

let magicGrid = new MagicGrid({
  container: '.container',
  animate: true,
  gutter: 12,
  static: true,
  useMin: true
});

•  행과 행 사이 간격 축소(gutter)

 

• 모바일 사이즈로 축소