如何使我的网站的缩放适合移动设备？

问题描述 投票：0回答：1

我有一个 Django 应用程序，但页面的移动视图存在问题。某些元素无法正确显示。 如果有人能帮助我纠正它们，我将不胜感激。

我有一个default.html，它显示在所有页面上。 它包含登录用户的名称、创建新文章和注销按钮。在移动视图中，它们完全混乱了。

我有一个pagination.html，它在移动视图中也很混乱。 我发布了有关该问题的两张屏幕截图。包括 css、pagination.html 和 default.html

提前谢谢你！

这是CSS：

body{
    background-color: #0f121f;
    background-repeat: no-repeat;
    color: #fff;
}

body *{
    font-family: Ubuntu;
}

h1, h2, h3, h4, h5{
    font-weight: normal;
    margin: 0;
}

a, a:hover, a:visited{
    color: #fff;
    text-decoration: none;
}

.wrapper{
    max-width: 960px;
    margin: 0 auto;
}

div.wrapper h1{
    text-align: center;
    margin: 100px auto;
    font-size: 2.4em;
}

.wrapper .create-article h2{
    color: #00dba0;
}

header{
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 20px 0;
}
/*
.Paginating_stuff{
    margin-top: 10px;
    pagination-disabled-bg:
}
.page-link {
    position: relative;
    display: block;
    margin-left: 0px;
    margin-right: 0px;
    color: #00dba0;
    background-color: #00dba0;
}
li.page-item.disabled{
    background-color: #00dba0;
}
*/
.create_logout_nav{
    justify-self: end;
    margin-left: 20px;
}
.create_logout_nav li{
    display: inline-block;
    margin-left: 20px;
}

.UpdateArticle li{
    display: inline-block;
    margin-left: 20px;
}
a.ArticleEdit{
    border: 1px solid #00dba0;
    padding: 10px;
    border-radius: 4px;
    color: #00dba0;
    transition: background 1s ease-out 100ms;
}
a.ArticleEdit:hover{
    color: #0f121f;
    border-color: #00dba1cc;
    background: #00dba1cc;
    transition: border 0.2s ease-out;
}
a.ArticleDelete{
    font-weight: 700;
    border: 1px solid #db000052;
    padding: 10px;
    border-radius: 4px;
    color: #00dba0;
    background: #db0000ad;
    /*transition: background 1s ease-out 100ms;*/
}
a.ArticleDelete:hover{
    color: #0f121f;
    border-color: #db000052;
    background: #db0000ad;
    /*transition: border 0.2s ease-out;*/
}
/*
nav{
    justify-self: end;
}

nav li{
    display: inline-block;
    margin-left: 20px;
}
*/
nav button{
    background: none;
    color: #fff;
    cursor: pointer;
    border: 0;
    font-size: 1em;
}

.pagination-set{
    margin-top: 10px;
}

.pagination li a{
    background-color: #0f121f !important;
    color:#00dba0 !important;
    border-color: #fff !important;
}

.pagination li.active a{
    color:#0f121f !important;
    background-color: #00dba0 !important;
    border-color: #fff !important;
}

.articles{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 30px;
}

.article{
    padding: 10px;
    position: relative;
    padding-bottom: 40px;
}

.article h2{
    font-size: 1.2em;
}

.article-details .article{
    padding: 0;
}

.article-details .article img{
    max-width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.article-details .article h2{
    text-align: center;
    margin: 20px auto;
    font-size: 2em;
}

.articles_list{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 30px;
}

.article_list{
    padding: 10px;
    position: relative;
    padding-bottom: 5px;
    text-align: center;
}

.article_list:hover{
    background-color: #00bda179;
    padding-top: 10px;
}

.article_list h2{
    font-size: 1.2em;
    margin-bottom: 10px;
}


.author{
    text-align: right;
}

.site-form input, .site-form textarea{
    display: block;
    margin: 10px 0 0 0;
}
.site-form, .site-form input{
    text-align: center,
}
/*
a.highlight{
    padding: 11px;
}

a.highlight:hover{
    border: 1px solid #00dba0;
    padding: 10px;
    border-radius: 4px;
    color: #00dba0;
}
*/
a.highlight{
    border: 1px solid #00dba0;
    padding: 10px;
    border-radius: 4px;
    color: #00dba0;
    transition: background 1s ease-out 100ms;
}
a.highlight:hover{
    color: #0f121f;
    border-color: #00dba1cc;
    background: #00dba1cc;
    transition: border 0.2s ease-out;
}

form.logout-link:hover{
    color: black;
}

.helptext{
    display: flex;
}

这是默认的.html：

{% load static %}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" property="og:description" content="These articles are about movies and created by users.">
        <meta name="keywords" content="seo, python, django, movies, articles, opinions, posts, users">
        <meta name="author" content="...">
        <title>Articles</title>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
        <link rel="stylesheet" href="{% static 'styles.css' %}">
        <link rel="icon" type="image/x-icon" href="{% static 'favicon.ico' %}">
    </head>
    <body>
        <header class="wrapper">
            <h1><a href="{% url 'home' %}"><img src="{% static 'logo5.png' %}" /></a></h1>
            <nav class="create_logout_nav">
                <ul>
                    {% if user.is_authenticated %}
                        <li>Hi, {{ user.username }}</li>
                        <li><a href="{% url 'articles:create' %}" class="highlight">Create new article</a></li>
                        <li>
                            <form class="logout-link" action="{% url 'accounts:logout' %}" method="post">
                                {% csrf_token %}
                                <button type="submit">Logout</button>
                            </form>
                        </li>
                    {% else %}
                        <li><a href="{% url 'accounts:login' %}">Login</a></li>
                        <li><a href="{% url 'accounts:signup' %}">Signup</a></li>
                    {% endif %}
                </ul>
            </nav>
        </header>
        <div class="wrapper">
            {% block content %}
            {% endblock %}
        </div>
    </body>
</html>

以下是相关的注销部分： 它包含登录用户的名称、创建新文章和注销按钮：

我尝试了一个想法来修复用户名、创建新文章和注销按钮。 我将 

display: inline-block;
更改为 
display: inline-flex;
:

.create_logout_nav li{
    display: inline-flex;
    margin-left: 20px;
}

但它只是创建了一个更大的“创建新文章”按钮：

我也有同样的分页问题：

这是分页.html：

{% if items.has_other_pages %}
    <div class="col-6 offset-3 text-center pagination-set">
        <nav aria-label="">
            <ul class="pagination justify-content-center">
                {% if items.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?page=1">&laquo First</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ items.previous_page_number }}"><<</a>
                    </li>
                {% endif %}
                {% for i in page_range %}
                    {% if items.number == i %}
                        <li class="page-item active">
                            <a class="page-link" href="">{{i}}<span class="sr-only"></span></a>
                        </li>
                    {% else %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{i}}">{{i}}</a>
                        </li>
                    {% endif %}
                {% endfor %}
                {% if items.has_next %}
                        <li class="page-item">
                            <a class="page-link" aria-label="Next" href="?page={{items.next_page_number}}">>></a>
                        </li>
                        <li class="page-item"><a class="page-link" href="?page={{ items.paginator.num_pages }}">Last &raquo</a></li>
                {% endif %}
            </ul>
        </nav>
    </div>
{% endif %}
html css responsive-design styles
1个回答
0
投票

我的回答将是一个问题，对此我很抱歉：

一些问题

你最终想实现什么？ “移动友好扩展”可能意味着不同的含义，具体取决于您的目标，也取决于您的技能。

默认情况下，网络是响应式的：您网站上的文本和部分（几乎）永远不会溢出并（几乎）很好地填充您的屏幕尺寸。

实用方面

根据您的情况，您需要的是回到更灵活的状态。 如果您希望我们为您提供帮助，请分享完整的 HTML 和 CSS，以便我们重现您的案例。

一些想法

header.wrapper {
    display: flex;
    flex-wrap: wrap; /* allows your content to wrap in case of need */
    justify-content: space-between; /* just put space between the two children */
}

如果您想在特定屏幕尺寸下强制执行特定行为：

/* Under 640px width */
@media (max-width: 640px) {
    /* Force the layout from row to columns */
    header.wrapper {
        flex-direction: column;
        align-items: center;
    }
    /* Reduce the image size on mobile, the most possible */
    header.wrapper h1 img {
        width: 180px;
        height: auto;
    }
}

如果您使用 Bootstrap，请查看有关网格系统的文档。他们已经拥有您处理该问题所需的一切。

希望这些能给您一些前进的帮助。

玩得开心！

对于分页，我会选择

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.