Question

我正在使用我的Django网站，根据我的响应式网站设计，我得到了一些不明确的要点。

我的环境：

Django 2.0.1
HTML 5
CSS
Bootstrap 3.3.7

我的问题：

我用这个分辨率在我的屏幕上开发了我的Django网站：1920 * 1080。现在我想将每个HTML模板调整到用户屏幕。我真的没有关于响应式设计的知识，因为我主要是后端开发者。

当我在不同的屏幕尺寸上显示我的网站时，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;
}

现在看起来很敏感，但这是一个很好的解决方案吗？然后，我如何用文本部分做到这一点？

Answer 1

您的代码中只有一个媒体查询行。结果是它不会执行任何更改。您需要至少有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中的网格系统。

Answer 2

我建议阅读一个bootstrap教程 - 获取最新的bootstrap（4）;我喜欢w3schools和here for images（with example here）。

Bootstrap在网格系统上运行，以获得最小的响应式图像（使用bootstrap 3语法）将class="container"父div和class="img-responsive"添加到img标记。

见下文，我从你的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 /标签来让你的网站在所有设备上都能很好地唱歌。教程很棒！

如何制作自适应图片

我的环境：

我的问题：

我的代码：

我网站上的例子：

编辑：

2 个答案: