Hoew to connect with Mobile Browser?
•
python manage.py runserver 0.0.0.0:8000 포트로 연결하면, local host가 아니더라도 접속할 수 있는 포트가 열린다.
•
ALLOWED_HOST
•
WiFi 로컬 네트워크 서버
1.
Pragmatic/settings.py에서 ALLOWED_HOSTS =[’*’]를 입력해준다. #모든 기기를 받는다
2.
모바일 브라우저에서 반응형 웹이 정상적으로 작동하지 않으므로 head.html에 코드를 작성한다.
<meta name="viewport" content="width=device-width" initial-scale=1, shrink-to-fit=no">
Python
복사
list.html에서 bootstrap과 magicGrid의 컨테이너 설정을 바꿔준다
<style>
.container {
padding: 0;
margin: 0, auto;
}
.container a {
width: 45%;
max-width: 250px;
}
.container div {
display: flex;
justify-content: center;
align-items: center;
border-radius: 1rem;
}
...
HTML
복사
magicgrid.js에서 gutter의 설정을 30 → 12로 바꿔준다
반응형 웹의 기능은 하지만, 모든 크기가 살짝 크다는 느낌이 있다
미디어 쿼리라는것을 이용해서 일정 크기 이하로 떨어지면 폰트 사이즈도 줄어들게 해준다
@media screen and (max-width: 500px) {
html {
font-size: 13px;
}
}
HTML
복사
base.css
스크린의 사이즈가 500 이하로 떨어지면, 아래의 스타일이 적용된다