3

Estou com um projeto e esse projeto foi todo feito do zero em meu PC, entretanto quando levei o meu projeto para outro PC que tinha uma resolução de monitor totalmente diferente do meu, as imagens e certos textos que coloquei ficaram fora do local que deviriam ficar.

Alguém tem alguma solução pra esse problema?

Alguma forma de que independente da resolução as imagens e textos apareçam de certa forma, pois tive dando uma olhada se já tinha alguma solução pra esse problema e tem só que para Android(Layout diferente em outro dispositivo) mas estou trabalhando com o Windows e como tem uma forma para Android pode ter para Windows.

OBS:já tentei colocar a imagem de diferentes formas, implementando ela no body do HTML com a tag "img" e pelo CSS com o "background" achando que meu erro foi na forma de colocar a imagem mas independente da forma que foi colocada esse problema permanece.

Meu arquivo HTML:

<div id="image-rodape">
  <img src="imagens/rodape.png" />
  <p class="texto_rodape">By: Matheus Wallace &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&copy;Copyright,TIPI 02/EBEP Maceió. Todos os direitos reservados.</p>
</div>

Meu arquivo CSS:

div#image-rodape img {
  position: absolute;
  display: block;
  top: 1235px;
  left: 390px;
  margin-bottom: 10px;
}

OBS2: Estou trabalhando no meu layout com imagens, tanto na parte do menu como no sidebar, no meu rodapé e os textos colocados no mesmos ficam todos saindo do local quando a resolução do monitor é diferente.

Imagem no meu PC:

inserir a descrição da imagem aqui

Imagem em outro PC:

inserir a descrição da imagem aqui

8
  • 2
    Tens que utilizar Media Queries para que o comportamento dos elementos e as alterações necessárias nos estilos CSS sejam feitas consoante o tamanho de cada ecrã.
    – Chun
    Commented 8/02/2017 às 0:19
  • Eu não fazia ideia desse Media Queries no entanto estou começando a compreender agora, e pelo que eu entendi os Queries como você disse eles fazem alterações nos arquivos CSS mas em sites como o do stackoverflow os elementos não parecem sofrer alterações, abri o site do stack em um netbook que tenho e visualmente é adicionado a penas as barras de rolagem horizontal e vertical sem fazer com que o elementos do site sofra alterações, nesse caso para obter um resultado igual ao desse site também pode ser feito apenas com Media Queries ? Commented 8/02/2017 às 1:03
  • 1
    Esse aqui tbm: pt.stackoverflow.com/questions/104798/… Commented 8/02/2017 às 17:33
  • 1
    Tenta CSS puro (meio confuso, mas dá certo lul) Link Commented 8/02/2017 às 23:24
  • 1
    Ao invés de usar pixel com paramento, trabalhe com porcentagem, assim se adaptando os dispositivo de diversas resoluções. Commented 17/02/2017 às 4:19

2 Respostas 2

1

Você pode usar as media queries do CSS. São ótimas para dar responsividade ao layout. Eu particularmente prefiro usar elas do que frameworks.

Aqui tem uma base para diversos tipos de tela com algumas observações que eu fiz:

/*

Aqui você coloca o CSS padrão de sempre

*/

.container {
    width: 100%;
} /* Esse será o tamanho padrao da classe container*/






/* A partir daqui são as media queries e as propriedades dos elementos que você colocar dentro das media queries
podem mudar quando a tela for esticada ou diminuída

/* Media Queries */ 
@media screen and (max-width: 83em) {
    .container{
        width: 80%;
    }   /*caso a viewport(janela do navegador) ou tamanho da tela for
        igual ou até 83em (vc também pode usar px se preferir) a classe .container só ocupará 80% da tela*/
}

@media screen and (max-width: 58em) { /*para telas menores ou do tamanho até 58em*/

}

@media screen and (max-width: 49.4375em) {/*para telas menores ou do tamanho até 49.4375em*/

}

@media screen and (max-width: 42.5em) {/*para telas menores ou do tamanho até 42.5em*/

}

@media screen and (max-height: 41.125em) {/*para telas menores ou do tamanho até 41.125em*/

}

@media screen and (max-width: 39.375em) {/*para telas menores ou do tamanho até 39.375em*/

}

@media screen and (max-width: 320px) {/*para telas menores ou do tamanho até 320px (aqui está um exemplo em px)*/

}

Esse exemplo aí que eu coloquei se encaixa praticamente em qualquer tela de qualquer dispositivo. As media queries não só para tamanho. Elas podem mudar qualquer propriedade. É como o CSS padrão, só que os elementos que colocar dentro da media querie terão as propriedades setadas para ele dentro da media querie quando a tela entrar na condição de tamanho.

Você pode ler mais sobre aqui

Enfim, também existem frameworks como o Bootstrap que podem te ajudar. Mas caso esteja começando é melhor aprender media queries antes de partir para um framework.

1

Olá, o problema não é algo que um plugin ou uma linah de código irá resolver. O problema está em sua arquitetura HTML e definições no CSS. O mais recomendável a fazer é seguir a estrutura de algum Framework front-end, pois ele já vai te dar toda arquitetura pronta.

Eu recomendo dar uma olhada no Bootstrap: http://getbootstrap.com/

Caso não tenha conhecimento pode usar alguns templates: https://startbootstrap.com/

2
  • (Minha opinião): Framework para quem está começando não é uma boa ideia. É recomendado sempre o básico antes para depois conseguir dominar a ferramenta. Se o AP não sabe media query, não saberá utilizar corretamente a responsividade do Bootstrap e entender a filosofia principal de mobile first.
    – Woss
    Commented 17/02/2017 às 11:52
  • Concordo com sua opinião, mas ao meu ver é mais fácil encontrar material de estudo e resolução dos problemas quando usado algum framework bom. O aprendizado acaba sendo até mais tranquilo, pois os problemas que acontecerem serão mais fáceis de serem reconhecidos e tratados. Commented 17/02/2017 às 13:19

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .