HTML Ajustar site automaticamente para cada dispositivo.

Joel Martins · 16 de abril de 2021

EU estive a tentar e não consegui resolver esse problema.

O meu site no pc fica 5estrelas mas no móvel fica todo desconfigurado.
Como faço para resolver isso?
Obrigado:)

DiF · 16 de abril de 2021

@Joel Martins Olá,

Você resolve esse problema usando media queries(responsividade) de acordo com as resoluções.

https://developer.mozilla.org/pt-BR/docs/Web/CSS/Media_Queries/Using_media_queries

Joel Martins · 16 de abril de 2021

@DiF não consegui entender o que é e para que serve o que está no site que me enviou.
Poderia explicar melhor?

Muito Obrigado:))

Adriano_web · 16 de abril de 2021

@Joel Martins Eae, tudo bem?

Você pode utilizar Consultas de mídia CSS para definir regras de estilo para determinados dispositivos.

Você pode usar um arquivo .css separado para especificar os estilos de um dispositivo móvel, por exemplo:

<link rel="stylesheet" media="screen and (max-width: 600px)" href="mobile.css">

Acima você criaria um CSS comum mais definindo o visual para quando a tela for menor que 600px.

Atributo "rel" especifica que o link é uma folha de estilo (stylesheet)
Atributo "media" especifica as configurações do media queries como a tela e o limite da largura que o estilo funcionaria.
Atributo "href" é uma referência ao arquivo CSS externo.

Para saber mais leia CSS Media Queries no w3schools.com

Joel Martins · 5 de maio de 2021

@Adriano_web Eu já tentei inseriri o que você me deu mas não funcionou. poderia dizer-me onde devo colocar, ou como o devo fazer?Obrigado:)

Aqui está o meu código:

<html lang="pt-PT">
        <title>PandaStore</title>
            <meta name="viewport" content="width=device-width">
                <meta name="author" content="Joel Tavares Martins">
                    <meta http-equiv="refresh" content="43200">
                    <style>
                    #botaohome
                    {
                      background-color: #4d8f50;
                      border: 2px solid #357838;
                      border-radius: 12px;
                      color: #9ff5a2;
                      padding: 15px 32px;
                      text-align: center;
                      display: inline-block;
                      font-size: 18px;
                      position: absolute;
                      top: 25px;
                      left: 45px;
                      box-shadow: 3px 3px 3px #878787;
                    }
                    #botaohome:hover{
                                            background-color: #39803c;
                                            box-shadow: 0px 0px 0px #878787;
                                            }
                        a
                        {
                          text-decoration: none;
                          color: black;
                        }
                            ul {
                              list-style-type: none;
                              margin: 0;
                              padding: 0;
                              overflow: hidden;
                              background-color: #333;
                              position: fixed;
                              top: 0;
                              width: 100%;
                              border-radius: 12px 0px 0px 12px;
                            }
                            
                            li {
                              float: left;
                            }
                            
                            li a {
                              display: block;
                              color: white;
                              text-align: center;
                              padding: 20px 22px;
                              text-decoration: none;
                              border-radius: 12px 0px 0px 12px;
                            }
                            
                            li a:hover:not(.active) {
                              background-color: #111;
                            }
                            
                            .active {
                              background-color: #4CAF50;
                            }
                            </style>
                        <ul>
                          <li><a class="active" href="index.html">Escolhe o teu dispositivo⟹ </a></li>
                          <li><a href="movel.html">Telemóvel</a></li>
                          <li><a href="index.html">Computador</a></li>
                        </ul>
                    </head>

                     <center><img src="imagens/panda99.png" alt="PandaStoreLogo" ></center> 
                        <center><p>Aqui vai conseguir encontrar todas as <b>informações</b>, <b>redes sociais</b> associadas entre outras coisas.</p></center>
                        <style>
                            #botaosobre{
                              background-color: #39803c;
                              border: 2px solid #357838;
                              border-radius: 12px;
                              color: #9ff5a2;
                              padding: 15px 32px;
                              text-align: center;
                              display: inline-block;
                              font-size: 16px;
                            }
                            a{
                                text-decoration: none;
                                color: black;
                            }
                        </style>            
                                <center>
                                    <a href="sobre.html"> 
                                        <div id="botaosobre">
                                  	        <b>INFO</b>
                                  	    </div> 
                                    </a>
                                </center>
                            <style>
                            #botaors{
                              background-color: #39803c;
                              border: 2px solid #357838;
                              border-radius: 12px;
                              color: #9ff5a2;
                              padding: 15px 32px;
                              text-align: center;
                              display: inline-block;
                              font-size: 16px;
                            }
                            a{
                                text-decoration: none;
                                color: black;
                            }
                        </style>            
                                <br><center>
                                    <a href="redessociais.html"> 
                                        <div id="botaors">
                                  	        <b> Redes Sociais </b>
                                  	    </div> 
                                    </a>
                                </center>
</html>

O meu objetivo é que o meu site se adapte automaticamente a qualquer dispositivo sem ser precisos criar mais que uma fonte de código. Agradeço toda a ajuda possível:))

darkstrikerd · 6 de maio de 2021

@Joel Martins Os colegas explicaram direitinho, as vezes em programação temos que dar um passo para trás para depois andar novamente, se estás tendo dificuldade em entender o que eles citaram, te recomendo dar uma estudada mais a fundo em CSS. abraço.