Oi, Douglas, tudo bem?
Ao alterar as configurações de margin e padding para se adequar à tela do seu notebook, você pode, sim, encontrar problemas ao visualizar a página em outros dispositivos. Isso ocorre porque as dimensões de margin e padding são fixas e não se adaptam automaticamente a diferentes tamanhos de tela.
Uma maneira de contornar isso é usar unidades relativas, como porcentagens ou 'vw'/'vh' (viewport width/height), em vez de unidades fixas, como pixels. Isso permitirá que as margens e preenchimentos se ajustem automaticamente ao tamanho da tela.
Por exemplo, em vez de definir um padding de 10px, você poderia definir um padding de 2%. Isso significa que o padding será sempre 2% da largura da tela, independentemente do tamanho da tela.
Além disso, você pode usar media queries no CSS, elas permitem que você aplique estilos diferentes com base nas características do dispositivo que está sendo usado para visualizar sua página.
Por exemplo, você pode ter um conjunto de estilos para telas menores que 600px de largura e outro conjunto de estilos para telas maiores que 600px de largura.
Aqui está um exemplo de como você pode usar uma media query em seu CSS:
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Neste exemplo, o fundo do corpo será light blue se a largura da tela for menor que 600px.
Caso queira aprender mais sobre media queries e unidades de medidas relativas e absolutas, recomendo a leitura da documentação e do artigo abaixo:
Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!
Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
