如何使该网站具有响应能力？

编程问答 2022-08-23

问题描述

我正在学习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像素。

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

解决方法

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

htmlresponsiveresponsive-designweb