Achei que poderia escrever o front-end na ponta dos meus dedos. Foi só quando vi o código h5 móvel que escrevi há muito tempo que percebi por que escrevi um código tão estúpido antes. (=ﾟДﾟ=)
Até aqui tudo bom,
e depois trava na hora de adaptar para outros modelos,
agora estou um pouco mais maduro (hahahaha, brincadeira)
então mudei o estilo aqui de novo
e descobri onde está o problema. , Escrevi o estilo antes de usar a porcentagem, e a largura dos diferentes modelos é diferente, por isso não pode se adaptar à maioria dos modelos e é fácil de recolher.
Nesse momento, tive uma ideia na cabeça. Acho que a maneira mais adequada de escrever isso é a caixa elástica. Dê uma olhada no
código depois que alterei o layout flexível YYDS abaixo ~ Sinto que o estilo anterior é muito feio. A propósito, mudei o estilo.
O seguinte é o efeito depois de alterar o layout do Flex.
O seguinte é o código
.eva_top_left{
flex: 4;
text-align: center;
padding-top: 2.3rem;
}
.eva_item1{
font-weight: bold;
}
.eva_top_right{
flex: 8;
font-size: 0.6rem;
margin-top: 1.5rem;
margin-right: 0.3rem;
}
.eva_top_right > div {
display: flex;
justify-content: space-around;
height: 1.5rem;
}
.eva_top_right .textsty{
color: #23B177;
}
.eva_con{
margin-top: 0.6rem;
}
.eva_con > div {
font-size: 0.7rem;
margin: 0.4rem;
margin-top: 0.6rem;
}
Vamos dar uma olhada na adaptação do modelo do iphone 12/13 mini, iphone 6/7/8 plus e iphone 5.
Claro, não importa qual seja a situação no simulador, você tem que ver o efeito na máquina real , certo?
Isso é meu. A tela do iqoo neo 5
é muito boa ~ hee hee