Ir para conteúdo
Luccas Gaulia

Classes de acordo com a resolução

Recommended Posts

Ola Pessoal,

 

Estou organizando o css e queria que a classe que fica no index (exemplo: se-include) utilizando uma classe do Bootstrap, mas de acordo com a resolução...

Assim, ele colocaria a class de acordo com a resolução seria o tamanho do Bootstrap....

 

Não esta funcionando, então poderiam me ajudar?

 

/** Smarthphones no formato "retrato" **/
@media screen and (min-width: 480px) and (orientation:landscape){
  html{
    font-size: 14px;
  }
  .btn{ font-size: 12px; }
  .se-include, .col-md-12{ }
}

/** Tablets e Smarthphones de segunda geração **/
@media screen and (max-width: 780px) and (orientation:portrait){
  html{
    font-size: 14px;
  }  
  .se-include, .col-md-12{ }
}

/** Desktops, Laptops e TVs. **/
@media screen and (min-width: 780px){
  html{
    font-size: 16px;
  }
  .se-include, .col-md-8, .col-md-offset-2 {  }
}

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Uma dica: Não precisa dessa "gabiarra" para passar media basta executar @media (TIPO)

 

Vamos lá: CSS não pode adicionar/remover dados na página, somente pode manipular.

Para que isso funcione .se-include, .col-md-8, .col-md-offset-2

 

A div deve possuir umas dessas class. Assim sendo se for min-width 780 qualquer resolução acima disso a div portadora dessa class assume suas propriedades.

 

Agora se for o caso de se-include somente aparecer com essa resolução em uma div qualquer. Isso deve ser feito por intermédio de javascript

Compartilhar este post


Link para o post
Compartilhar em outros sites

Então... o Seguinte...

 

Eu preciso que a resolução mude de acordo com o aparelho utilizado, por isso estou usando @media... até ae tudo bem...

 

Só que, preciso que ao uso em aparelhos de Desktop, Notes e etc... fique com 80% da Resolução, não precisa esticar tudo...

O restante, fique 100%...

 

Por isso, a ideia seria utilizar a classe "se-include" e ela puxar as outras classes para ela, assim funcionaria do jeito que quero...

 

Então, na realidade, como eu determino uma classe "pegue" todas as atribuições de outra classe? Nesta caso, Boostrap...

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro 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

  • Conteúdo Similar

    • Por reginaldo123
      estou com dificuldade em criar uma url pernalizada exemplo
       
      href="www.bolacha,.com/novabolacha"
      value= "www.bolacha.com"
       
      quando o usuario copia a url para colocar em outra pagina quero que apareça o conteudo de value, e seja direcionado para o href.
       
    • Por Incompetech
      Então.. a um tempo atrás eu fiz um post pedindo ajuda em relação a tooltip mas não obtive resposta, então decidi deixar essa funcionalidade para depois.
      Como disse na minha primeira pergunta eu estou praticando HTML / CSS / JS ... então comecei a fazer uma entrada para MU ONLINE que foi um dos jogos que mais joguei em épocas de LAN HOUSE. Então o que quero perguntar a vocês é o seguinte:

      Como podem ver nessa imagem acima ela tem um total de 10 itens que são icones pequenos que ao clicar neles logo ele irá dar loading na foto do item completo, gostaria de saber como fazer isso.
       
      No meu caso eu criei essa entrada no Photoshop: 
       
      E no caso gostaria de fazer a mesma coisa porém clicando nas setas que estão do lado da box como podem ver no centro da imagem.
      Para isto eu devo usar Js? E qual código devo usar, eu sou super perdido com Js.
      Agradeço desde já! :D

    • Por Artes Ussler
      Olá!
       
      Como eu faço uma barrinha abaixo do texto como essa da imagem apenas usando CSS?
       

    • Por Guga Alves
      Olá, estou enfrentando um problema no qual não tinha tido contato até então.

      Alguns textos em uma landing que estou trabalhando simplesmente não exibidos ou apresentam erros na exibição.

      Gostaria de saber se alguém já enfrentado esse problema poderia me ajudar com isso.

      Abaixo segue imagens dos erros
       
       
       


    • Por Incompetech
      Olá a todos. Então.. eu estava praticando um pouco de HTML / CSS e no fim cheguei a um resultado bem legal e simples claro disto aqui:
       
      Eu sei que alguns vão reconhecer isto.. Mas para quem não conhece é algo relacionado ao game MU ONLINE.
      Enfim. Como podem ver eu inventei alguns adicionais que no caso são as características dessa armadura, porém eu gostaria de aplicar um efeito em que esses adicionais apareçam quando eu passar o mouse por cima da imagem da armadura.. como se fosse dentro do game.
      Abaixo vão alguns exemplos:
      Efeito aplicado em um projeto HTML: 

      O mesmo efeito In Game:
       
      Sei que pode parecer algo meio trivial mas gostaria muito de aprender como eu faço para criar algo igual, se puderem me ajudar eu agradeço de coração.
×

Informação importante

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