Question

Я работаю над своим сайтом Django и получаю некоторые неясные очки в соответствии с моим отзывчивым дизайном сайта.

Мое окружение:

Django 2.0.1
HTML 5
CSS
Bootstrap 3.3.7

Моя проблема:

Я разработал свой сайт Django на своем экране с этим разрешением: 1920 * 1080.Теперь я хотел бы адаптировать каждый шаблон HTML к экранам пользователей.На самом деле я не обладаю знаниями об адаптивном дизайне, потому что я в основном разработчик Back-End.

Когда я отображаю свой сайт на экране другого размера, CSS вообще не годится.Я предполагаю, что изображения делают мой экран очень уродливым, потому что он не совсем отзывчив.

Мой код:

HTML-скрипт:

<!-- This script lets to define homepage template for "Accueil" -->

{% extends 'Base_Accueil.html' %}

{% load staticfiles %}
{% load static %}

{% block content %}

    <div id="content">

        <br></br>

        <div id="content-1">

            <div id="presentation-title">
                <p>Petit mot de l'Astrophotographe & Développeur du site</p>
            </div>
            <div id="presentation-text">
                <p>  Je vous souhaite la bienvenue sur mon site dédié à l'Astrophotographie. A travers votre parcours sur celui-ci, vous allez découvrir ma passion pour la photographie des objets de l'Univers. Du Soleil, notre étoile, aux galaxies les plus lointaines en passant par les vastes amas de gaz qui composent l'infiniment grand, vous allez pouvoir contempler des objets atypiques de part leurs formes et leurs couleurs.</p><br />

                <p> C'est avec plaisir que je vous invite à vous balader sur mon site, découvrir ma galerie d'images, mes bricolages, mes articles & publications, ... Vous trouverez également le matériel astronomique employé pour la réalisation des différents clichés disponibles sur ce site ainsi que diverses informations complémentaires. N'hésitez pas à partager vos avis et à venir le visiter régulièrement pour entrevoir les nouvelles images astrophotographiques.</p><br />

                <p align="center">Je vous souhaite une bonne visite !</p>
            </div>
        </div>

        <br></br>

        <div class="row">
        </div>

        <div id="content-2">
            <div id="presentation-image-récente">
                <p>Dernière image publiée</p>
            </div>
            <div id="presentation-image">
                <li class="image">
                    <img src='{{photo.Image_upload.url}}'/>
                    <p></p>
                    <figcaption>
                        <div>
                            <center>
                                <p></p>
                                <p><b>{{photo.Nom}} ({{photo.Designation}})</b></p>
                            </center>
                        </div>
                    </figcaption>
                </li>
            </div>
        </div>

        <div class="row">
        </div>
        <br></br>

    </div>
    <p></p>

{% endblock content %}

CSS-скрипт:

@media (min-width: 1900px) {

    body {
        background-color: #4D4D4D;
    }

    .dropdown-submenu {
        position: relative;
    }

    .dropdown-submenu>.dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -6px;
        margin-left: -1px;
        -webkit-border-radius: 0 6px 6px 6px;
        -moz-border-radius: 0 6px 6px;
        border-radius: 0 6px 6px 6px;
    }

    .dropdown-submenu:hover>.dropdown-menu {
        display: block;
    }

    .dropdown-submenu>a:after {
        display: block;
        content: " ";
        float: right;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 5px 0 5px 5px;
        border-left-color: #ccc;
        margin-top: 5px;
        margin-right: -10px;
    }

    .dropdown-submenu:hover>a:after {
        border-left-color: #fff;
    }

    .dropdown-submenu.pull-left {
        float: none;
    }

    .dropdown-submenu.pull-left>.dropdown-menu {
        left: -100%;
        margin-left: 10px;
        -webkit-border-radius: 6px 0 6px 6px;
        -moz-border-radius: 6px 0 6px 6px;
        border-radius: 6px 0 6px 6px;
    }

    #banner {
        width:100vw;
        }


    .navbar-collapse {
      text-align:center;
       background-color: #1B1B1B;
    }

    .navbar-nav {
        background-color: #1B1B1B;
        text-align:center;
        display:inline-block;
        float:none;
    }

    ul.nav.navbar-nav > li > a {
        color : #00BFFF; /* Orange color*/ 
        padding-top:10px !important; 
        padding-bottom:0 !important;
        height: 35px;
    }

    .navbar {min-height:35px !important;  background-color: #1B1B1B;}

    .navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {
        background-color: transparent;
    }

    .dropdown-menu, .dropdown-menu > li > a {
        background-color: #1B1B1B;
        color: #00BFFF;
    }

    .dropdown-menu > li > a:hover {
        background-color: transparent;
        color : white;
    }

    .dropdown-menu > li.divider {
        background: #00BFFF;
    }

    #content{
        border-radius: 4px;
        width: 70%;
        margin: 0 auto;
        background-color: #2E2E2E;
        color : #C9C9C3;
        box-shadow: rgba(0, 0, 0, 0.498039) 0px 0px 16px;
    }

    #content-1 {
        border-radius: 4px;
        width: 55%;
        margin: 0 auto;
        background-color: #2E2E2E;
        color : #C9C9C3;
        border-style: solid ;
        border-width: 1px;
        border-color: #00BFFF;
        }

    #content-2 {
        border-radius: 4px;
        width: 55%;
        margin: 0 auto;
        background-color: #2E2E2E;
        color : #C9C9C3;
        border-style: solid ;
        border-width: 1px;
        border-color: #00BFFF;
    }

    #content-messages {
        border-radius: 4px;
        width: 55%;
        margin-left: 14%;
        background-color: #2E2E2E;
        color : #C9C9C3;
        border-style: solid ;
        border-width: 1px;
        border-color: #00BFFF;
    }

    #footer{
        border-radius: 4px;
        width: 70%;
        margin: 0 auto;
        background-color: #1B1B1B;;
        color : white;
        margin-bottom: 1%;
        padding-bottom: 1%;
        -webkit-box-shadow: black 0px 0px 12px;
        box-shadow: black 0px 0px 12px;
    }

    .footer-text, .footer-text-list {
        color : #C9C9C3;
        font-size: 12px;
        text-align: justify;
        font-family: 'Noto Sans', Helvetica, Arial, sans-serif;
    }

    ul  {
        list-style-type: none;
    }

    p.footer-title {
        margin-left:5%;
    }

    .footer-title {
        margin-top: 14%;
        color : white;
        font-size: 26px;
        font-family: 'Noto Serif', Georgia, Times, serif;
    }

    .col-lg-3 {
        margin-left: 6%;
    }

    #presentation-author, #presentation-title, #presentation-image-récente, #galerie-image{
        border-radius: 4px;
        margin: 0 auto;
        background-color: #00BFFF;
        color : white;
        font-family: 'Noto Sans', Helvetica, Arial, sans-serif;
    }

    #presentation-author > p, #presentation-title > p, #presentation-image-récente > p, #galerie-image > p{
        margin-left:4%;
        font-family: 'Noto Sans', Helvetica, Arial, sans-serif;
    }

    #presentation-description, #presentation-text {
        margin-left: 2%;
        font-family: 'Noto Sans', Helvetica, Arial, sans-serif;
    }


    .carousel-inner > .item > img,
    .carousel-inner > .item > a > img,
    #presentation-image > img {
                    width: 100%;
                    margin: auto;
                }

    figcaption > div > p {
        color : #00BFFF;
    }


    figure.effect-new:hover figcaption::before,figure.effect-new:hover p{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}

    .image img {
        max-width: 100%;
        height: auto;
    }

}

Примеры с моего сайта:

РЕДАКТИРОВАТЬ:

Я удалил media (min-width:1900px) и изменил .image img следующим образом:

.image img {
    max-width: 100%;
    height: auto;
    width: auto\9;
}

Кажется, сейчас отзывчивый, но это хорошее решение?Тогда, как я могу сделать это с текстовыми частями?

Paul · Answer 1 · 08 июня 2018

Я предлагаю прочитать учебник по начальной загрузке - для последней версии начальной загрузки (4);Мне нравятся w3schools и здесь для изображений ( с примером здесь ).

Bootstrap работает в сеточной системе, чтобы получить минимум минимумадаптивное изображение (с синтаксисом начальной загрузки 3) добавьте родительский div class="container" и тег class="img-responsive" к тегу img.

см. ниже, я удалил тег image из вашего css и вынул теги django:

<!-- This script lets to define homepage template for "Accueil" -->
<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
  <body>
      <div id="container" class="container">

          <br></br>

          <div id="content-1">

              <div id="presentation-title">
                  <p>Petit mot de l'Astrophotographe & Développeur du site</p>
              </div>
              <div id="presentation-text">
                  <p>  Je vous souhaite la bienvenue sur mon site dédié à l'Astrophotographie. A travers votre parcours sur celui-ci, vous allez découvrir ma passion pour la photographie des objets de l'Univers. Du Soleil, notre étoile, aux galaxies les plus lointaines en passant par les vastes amas de gaz qui composent l'infiniment grand, vous allez pouvoir contempler des objets atypiques de part leurs formes et leurs couleurs.</p><br />

                  <p> C'est avec plaisir que je vous invite à vous balader sur mon site, découvrir ma galerie d'images, mes bricolages, mes articles & publications, ... Vous trouverez également le matériel astronomique employé pour la réalisation des différents clichés disponibles sur ce site ainsi que diverses informations complémentaires. N'hésitez pas à partager vos avis et à venir le visiter régulièrement pour entrevoir les nouvelles images astrophotographiques.</p><br />

                  <p align="center">Je vous souhaite une bonne visite !</p>
              </div>
          </div>

          <br></br>

          <div class="row">
          </div>

          <div id="content-2">
              <div id="presentation-image-récente">
                  <p>Dernière image publiée</p>
              </div>
              <div id="presentation-image">
                  <li class="image">
                      <img src='download.jpg' class="img-responsive" width="1900px" />
                      <p></p>
                      <figcaption>
                          <div>
                              <center>
                                  <p></p>
                                  <p><b>some (text)</b></p>
                              </center>
                          </div>
                      </figcaption>
                  </li>
              </div>
          </div>

          <div class="row">
          </div>
          <br></br>
      </div>
    </body>
  </html>

Вы захотите поиграть с div / тегами строк и столбцов, чтобы ваш сайт хорошо пел на всех устройствах.Учебники великолепны!

Toolbox · Answer 2 · 08 июня 2018

У вас есть только одна строка медиа-запроса в вашем коде.В результате он не будет выполнять никаких изменений.У вас должно быть как минимум 2 медиазапроса, как описано ниже:

@media only screen and (max-width: 1899px) {
    body {
      background-color: red;
     }
    }

    @media only screen and (min-width: 1900px) {
    body {
      background-color: blue;
     }
    }

Помимо отклика выше, если вы хотите контролировать формат и положение вашего текста и изображения, я предлагаю вам реализовать CSS-сетку, котораясистема сетки, встроенная в CSS.

Как сделать отзывчивый образ

Мое окружение:

Моя проблема:

Мой код:

Примеры с моего сайта:

РЕДАКТИРОВАТЬ:

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 2 ]

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Как сделать отзывчивый образ

Мое окружение:

Моя проблема:

Мой код:

Примеры с моего сайта:

РЕДАКТИРОВАТЬ:

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 2 ]

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Похожие темы