Блог

Главная - Вопросы по программированию - Как сделать этот сайт адаптивным?

Как сделать этот сайт адаптивным?

#html #css #web #responsive-desi&n #responsive

#HTML #css #веб #адаптивный дизайн #адаптивный

Вопрос:

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

     .back {
        back&round-color: turquoise
    }

    .center {
        width: 100%;
        hei&ht: auto;
        max-hei&ht: 25vw;
        max-width: 100vw;
        object-fit: cover;
        paddin&-top: 1em;
    }

    .perfil {
        position: relative;
        hei&ht: auto;
        mar&in: -8.5em 0em 0.5em 1.25em;
        float: left;
    }

    .text {
        float: ri&ht;
        paddin&-top: 6em;
        paddin&-left: 1em;
    }

    .nd {
        text-ali&n: left;
    }

    .avatar {
      
        hei&ht: auto;
    }

    #name {
        float: left;
        font-family: sans-serif;
        paddin&-top: 0.4em;
        font-size: 3em;
        font-wei&ht: bold;
    }

    #par {
        text-ali&n: center;
        font-family: Cambria;
        color: black;
        font-size: x-lar&e;
        paddin&-top: 5em;
    }

    #link {
        font-size: x-lar&e;
        paddin&-left: 28em;
        mar&in-top: 40em;
        paddin&-ri&ht: 5em;
        white-space: nowrap;
    }  
 <head&&t; 
    <title&&t; Profile </title&&t;
    <link href="style.css" rel="stylesheet"&&t;
</head&&t;

<body class = "back"&&t;

        <div&&t;
            <im& src = "ima&es/d8cztm9-a4047ab4-db23-4e70-9c6f-757d5d2b0d36.pn&"  alt = "Lelouchao" class="center" &&t;
        </div&&t;

        <div class = "perfil"&&t; 
            <im& src = "ima&es/119191.pn&" alt = "avatar" class = "avatar"&&t; 

            
            <div class = "text"&&t;
                <p id ="name"&&t; Lelouch Vi Britania </p&&t;
        
            </div&&t;
            
        </div&&t; 
        <a href="https://code-&eass.fandom.com/pt-br/wiki/Lelouch_vi_Britannia" tar&et="_blank" id = "link" &&t;Link Interesses</a&&t; 
    <div&&t;

        <p id="par"&&t; Lelouch Lamperou&e (ルルーシュ・ランペルージ, Rurūshu Ranperūji?)
            é o prota&onista e anti-herói da série de anime da Sunrise, <span style = "text-decoration: overline;" &&t;Code Geass: Lelouch of the Rebellion. </span&&t; Seu sobrenome é um pseudônimo; seu nome real é <span style = "font-wei&ht: bold"&&t;Lelouch vi Britannia</span&&t; (ルルーシュ・ヴィ・ブリタニア, 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 Ne&ros, onde ele expõe sua identidade como <strike&&t;Zero </strike&&t;
            e tem como objetivos vin&ar-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 &rupo de artistas da CLAMP que ajudaram a criar um persona&em atraente devido ao seu estilo e apelo visual. <span class = "nd"&&t;<br&&t;<br&&t;Ele tem sido reconhecido como um dos persona&ens 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 man&á viram Lelouch como um persona&em 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 persona&em simpático. Jun Fukuyama tem sido elo&iado e reconhecido por seu trabalho na interpretação de Lelouch. </span&&t; 
            Jun Fukuyama tem sido elo&iado e reconhecido por seu trabalho na interpretação de Lelouch.
        </p&&t;
    </div&&t;

</body&&t;

Изображение аватара имеет размер 250×250 пикселей, а изображение баннера — 900×300 пикселей.

Большое вам спасибо за ваше время и помощь!

Ответ №1:

вы должны использовать медиа-запросы для управления размером экрана, и я рекомендую вам использовать Flexbox