如何让这个网站响应？答案

【问题标题】：How to make this site responsive?如何让这个网站响应？
【发布时间】：2020-12-01 16:44:45
【问题描述】：

我正在学习 HTML 和 CSS，现在我愿意学习如何使其具有响应性。我已经尝试过，并且在可以在多个设备上测试的 chrome 中是可行的，但是当我扩展/建模浏览器时，它变得很奇怪。

    .back {
        background-color: turquoise
    }

    .center {
        width: 100%;
        height: auto;
        max-height: 25vw;
        max-width: 100vw;
        object-fit: cover;
        padding-top: 1em;
    }

    .perfil {
        position: relative;
        height: auto;
        margin: -8.5em 0em 0.5em 1.25em;
        float: left;
    }

    .text {
        float: right;
        padding-top: 6em;
        padding-left: 1em;
    }

    .nd {
        text-align: left;
    }

    .avatar {
      
        height: auto;
    }

    #name {
        float: left;
        font-family: sans-serif;
        padding-top: 0.4em;
        font-size: 3em;
        font-weight: bold;
    }

    #par {
        text-align: center;
        font-family: Cambria;
        color: black;
        font-size: x-large;
        padding-top: 5em;
    }

    #link {
        font-size: x-large;
        padding-left: 28em;
        margin-top: 40em;
        padding-right: 5em;
        white-space: nowrap;
    }

<head> 
    <title> Profile </title>
    <link href="style.css" rel="stylesheet">
</head>

<body class = "back">

        <div>
            <img src = "images/d8cztm9-a4047ab4-db23-4e70-9c6f-757d5d2b0d36.png"  alt = "Lelouchao" class="center" >
        </div>

        <div class = "perfil"> 
            <img src = "images/119191.png" alt = "avatar" class = "avatar"> 

            
            <div class = "text">
                <p id ="name"> Lelouch Vi Britania </p>
        
            </div>
            
        </div> 
        <a href="https://code-geass.fandom.com/pt-br/wiki/Lelouch_vi_Britannia" target="_blank" id = "link" >Link Interesses</a> 
    <div>

        <p id="par"> Lelouch Lamperouge (ルルーシュ・ランペルージ, Rurūshu Ranperūji?)
            é o protagonista e anti-herói da série de anime da Sunrise, <span style = "text-decoration: overline;" >Code Geass: Lelouch of the Rebellion. </span> Seu sobrenome é um pseudônimo; seu nome real é <span style = "font-weight: bold">Lelouch vi Britannia</span> (ルルーシュ・ヴィ・ブリタニア, Rurūshu vi Buritania?),
            11° príncipe do Santo Império Britanniano e filho do 98° imperador da Britannia, Charles zi Britannia. Lelouch é o líder da Ordem dos Cavaleiros Negros, onde ele expõe sua identidade como <strike>Zero </strike>
            e tem como objetivos vingar-se de seu pai pela misteriosa morte de sua mãe, do seu exílio no Japão e recriar um mundo melhor para sua irmã Nunnally. Seu seiyū japonês é Jun Fukuyama, e sua versão criança é dublada por Sayaka Ohara. 
            Lelouch foi projetado pelo grupo de artistas da CLAMP que ajudaram a criar um personagem atraente devido ao seu estilo e apelo visual. <span class = "nd"><br><br>Ele tem sido reconhecido como um dos personagens mais populares do Japão e desde a sua estreia em Code Geass tem aparecido no topo de diversas pesquisas. As publicações de anime e mangá viram Lelouch como um personagem interessante, embora ele queira destruir um império usando métodos cruéis, ele ainda possui um lado humano que entra em conflito com seus ideais o que o faz um personagem simpático. Jun Fukuyama tem sido elogiado e reconhecido por seu trabalho na interpretação de Lelouch. </span> 
            Jun Fukuyama tem sido elogiado e reconhecido por seu trabalho na interpretação de Lelouch.
        </p>
    </div>

</body>

头像图片为 250x250 像素，横幅图片为 900x300 像素。

非常感谢您的宝贵时间和帮助！

【问题讨论】：

标签： html css web responsive-design responsive

【解决方案1】：

您必须使用media queries 来控制屏幕大小行为，我建议您使用Flexbox

【讨论】：