Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Arcashaid Espert

Fazer site mudar css para versão mobile ?

Por , em Desenvolvimento frontend

Recommended Posts

Arcashaid Espert    1

Arcashaid Espert
Postado

Primeiro vamos ao código que estou usando

 

 

<head> <!-- Informações do cabeçalho -->
<meta charset="utf-8" /> <!-- Declarando que estamos usando caracteres comuns no brasil -->
<meta name="viewport" content="width=device-width"> <!-- Meta tag para adaptar para o tamanho da tela dos telefones -->
<title>Stands de Jojo</title> <!-- Titulo do projeto -->
<link rel="stylesheet" href="style.css" media="screen" /> <!-- Folha de estilo para desktop -->
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 320px)"><!-- Folha de estilo para telefones -->
<link rel="shortcut icon" href="Jojo_logo.png" type="image/x-icon" />
</head>

 

Eu ja pesquisei em vários lugares e em todos mandam fazer isso, mas simplesmente quando vou testar pelo google chrome (que tem um sistema de emular os tamanhos de vários dispositivos ) simplesmente mantêm o cc da versão de desktop ! algum pode me ajudar a entender o que estou fazendo de errado ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Wagner Bugs    1

Wagner Bugs
Postado

Uma alternativa que considero interessante é colocar no mesmo arquivo CSS as variações:

 

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<link href="style.css" rel="stylesheet" />

</head>

 

Arquivo style.css:

.classe {
atributo: definição;
}

@media only screen and (max-width: 767px) {

.classe {
atributo: definição;
}

}

@media only screen and (max-width: 480px) {

.classe {
atributo: definição;
}

}

 

@media only screen and (max-width: 320px) {

.classe {
atributo: definição;
}

}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Arcashaid Espert    1

Arcashaid Espert
Postado

Eu preferi separar eles pois fica mais fácil de editar futuramente. eu descobri que o código esta correto, e que eu imagina que iria trocar de formatação, mas na verdade ele vai manter a normal e vai mudar apenas o que eu colocar na segunda, mas obrigado pela ajuda.

Compartilhar este post

Link para o post
Compartilhar em outros sites

pwd    7

pwd
Postado

Hey cara, blzs!?

 

Acho que vc está no caminho certo!

Vamos lá, para exibir o site em dispositivos móveis vc precisa seguir algumas premissas:

Quem tal mudar seu código para HTML5? Abaixo segue seu mesmo código com marcação HTML5.

E vc precisa dizer para o navegador que seu site está pronto pra ele, como?

Declarando uma META TAG "viewport" (Leia sobre ela, é importante)

<meta name="viewport" content="width=device-width, initial-scale=1">

Hoje, usamos Media Queries para codificar nosso CSS, no mesmo arquivo vc entrega CSS móbile* e Desk* vamos falar assim ok?

Segue um exemplo:

/* Minhas classes para móbile */

.conteudo{} 

/* FIM Minhas classes para móbile */


@media (min-width : 320px) {

}

@media (min-width : 480px) {

}

@media (min-width : 768px) {

}

@media (min-width : 992px) {
    
/* Minhas classes para Desktops */

    .conteudo{} 

/* FIM Minhas classes para Desktops */

}

@media (min-width : 1200px) {

}

HTML

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>Stands de Jojo</title>

    
    <link href="css/style.css" rel="stylesheet">

      </head>
 <body>
    
    <div class="conteudo">
        
        DIVs paranauê
        
    </div>        
    
  </body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito