(Django 기초) 모바일 적용

Posted by : Django at Sep 28, 2020

Category : Django

Get Code

모바일 환경에서 접속가능하게 수정

$ python manage.py runserver 0.0.0.0:8000

# pragmatic\settings.py

# ...

ALLOWED_HOSTS = ['*']

# ...

여기까지하면 접속은 가능, 하지만 UI가 PC에 적용되어 많이 깨진다

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

<!-- ... --->

<!-- articleapp\list.html -->

{% extends 'base.html' %}
{% load static %}

{% block content %}

  <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;
    }

    .container img {
      width: 100%;
      border-radius: 1rem;
    }

<!-- ... -->

    <div style="text-align:center;"> 
        <a href="{% url 'articleapp:create' %}" class="btn btn-dark rounded-pill mt-3 mb-3 px-3"> 
            Create Article 
        </a> 
    </div>

<!-- ... -->

// static\magic-grid.js

// ...

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

// ...

/* static\base.css */

/* ... */

@media screen and (max-width:500px) {
    /*max-width가 500이하면 적용해 달라*/
    html {
        font-size: 13px;
    }
}