Ir ao conteúdo
  • Cadastre-se

HTML Ajustar site automaticamente para cada dispositivo.


Posts recomendados

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:)

Link para o post
Compartilhar em outros sites
  • Moderador

@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

  • Curtir 1
Link para o post
Compartilhar em outros sites

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

Muito Obrigado:))

Link para o post
Compartilhar em outros sites

@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. 

 

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

 

Para saber mais leia CSS Media Queries no w3schools.com 

 

Link para o post
Compartilhar em outros sites
  • 3 semanas depois...

@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:))

Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

Redes-Wi-Fi-capa-3d-newsletter.png

EBOOK GRÁTIS!

CLIQUE AQUI E BAIXE AGORA MESMO!