如何解决如何使该网站具有响应能力?
我正在学习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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。