COMO FAZER MEU SITE SE ADAPTAR A UM MONITOR DE QUALQUER RESOLUÇÃO?
Olá sou iniciante, e ao criar o meu site me deparei com alguns poblemas um deles é o meu site se desfazer quando ele é exibido em um monitor com uma resolução diferente da minha, ja tentei resolver de varias formas, mais nenhuma funcionou, alguem ae tem alguma solução?
Alysson
Curtidas 0
Respostas
Diego Marinho
24/08/2023
Com HTML e CSS pra se fazer esse tipo de ajuste só usando o: "@media" no CSS
Tem um conceito aplicado na implementação web chamado : MIBILE FIRST; ou seja, o design para aparelhos mobile deve ser projetado antes que o desing para desktop;
Basicamente, seria assim ... imagina um documento CSS que estiliza um formulário HTML que vc quer ajustar ele para diversas telas ( do celular com menor display a um grande monitor ), como vc faria ?
Primeiro vc começaria a estilizar focando os displays para mobile depois vc progrediria pra displays desk, mais ou menos assim :
ARQUIVO CSS :
/* TUDO QUE ESTIVER AQUI ABAIXO, ANTES DO COMANDO "@MEDIA", SERÁ O PADRÃO DO SITE */
form{
width : 300px
height : 400px
}
input{
width : 150px
height: 30px
}
button{
width : 80px
height: 20px
}
/* AGORA ABAIXO DESSE COMANDO "@MEDIA", ASSIM QUE SUA TELA FOR MAIOR QUE 600PX O FORMULÁRIO SE AJUSTARÁ AOS NOVOS VALORES QUE VC COLOCAR NO FORM*/
@media(min-width: 600px) {
form{
width : 500px
height : 700px
}
input{
width : 200px
height: 36px
}
button{
width : 120px
height: 36px
}
}
/* ASSIM POR DIANTE ... AGORA SE VC QUISER CONFIGURAR O SITE PARA UMA TELA QUE SEJA MAIOR QUE 1200 PX, OU QUALQUER OUTRO VALOR, BASTA VOCÊ TROCAR O VALOR DO " MIN-WIDTH" DENTRO DO PRÓXIMO @MÉDIA PARA O VALOR DESEJADO */
! sempre que o display for maior que 1200px os objetos sofrerão as alterações setadas abaixo !
@media(min-width: 1200px) {
form{
width : 600px
height : 800px
}
input{
width : 240px
height: 36px
}
button{
width : 160px
height: 36px
}
}
Dá uma olhadinha no comando "@media" do css pois há mais coisas que vc pode fazer com ele para o propósito de ajuste de tela.
Tem um artigo muito bom, da DEVMedia, que explica várias funcionalidades que pode te ajudar ... segue o link :
https://www.devmedia.com.br/utilizando-css-media-queries/27085
Tem um conceito aplicado na implementação web chamado : MIBILE FIRST; ou seja, o design para aparelhos mobile deve ser projetado antes que o desing para desktop;
Basicamente, seria assim ... imagina um documento CSS que estiliza um formulário HTML que vc quer ajustar ele para diversas telas ( do celular com menor display a um grande monitor ), como vc faria ?
Primeiro vc começaria a estilizar focando os displays para mobile depois vc progrediria pra displays desk, mais ou menos assim :
ARQUIVO CSS :
/* TUDO QUE ESTIVER AQUI ABAIXO, ANTES DO COMANDO "@MEDIA", SERÁ O PADRÃO DO SITE */
form{
width : 300px
height : 400px
}
input{
width : 150px
height: 30px
}
button{
width : 80px
height: 20px
}
/* AGORA ABAIXO DESSE COMANDO "@MEDIA", ASSIM QUE SUA TELA FOR MAIOR QUE 600PX O FORMULÁRIO SE AJUSTARÁ AOS NOVOS VALORES QUE VC COLOCAR NO FORM*/
@media(min-width: 600px) {
form{
width : 500px
height : 700px
}
input{
width : 200px
height: 36px
}
button{
width : 120px
height: 36px
}
}
/* ASSIM POR DIANTE ... AGORA SE VC QUISER CONFIGURAR O SITE PARA UMA TELA QUE SEJA MAIOR QUE 1200 PX, OU QUALQUER OUTRO VALOR, BASTA VOCÊ TROCAR O VALOR DO " MIN-WIDTH" DENTRO DO PRÓXIMO @MÉDIA PARA O VALOR DESEJADO */
! sempre que o display for maior que 1200px os objetos sofrerão as alterações setadas abaixo !
@media(min-width: 1200px) {
form{
width : 600px
height : 800px
}
input{
width : 240px
height: 36px
}
button{
width : 160px
height: 36px
}
}
Dá uma olhadinha no comando "@media" do css pois há mais coisas que vc pode fazer com ele para o propósito de ajuste de tela.
Tem um artigo muito bom, da DEVMedia, que explica várias funcionalidades que pode te ajudar ... segue o link :
https://www.devmedia.com.br/utilizando-css-media-queries/27085
GOSTEI 0