Search the Community

Olá. Estou criando um site e já consegui fazer as fontes mudarem de tamanho, conforme o tamanho da tela. Se a tela do usuário for um celular, as fontes aumentam e ficam legíveis. Agora preciso que determinados ícones em png, também aumentem da mesma forma, ficando legíveis em telas menores. O código de uma das imagens é este: <img style="width: 45px; height: 12px;" alt="" src="logomar.png"><br> Queria saber o que devo incluir para que quando a tela for menor que 480 pixel, a imagem dobre de tamanho. Obrigado.

Bom dia Pessoal; Seguinte, eu criei o menu bootstrap segue o código abaixo. Quando eu estou vendo o site pelo celular, o menu vira um HAMBURGUER. Só que eu quero quando clicar no HAMBURGUER ele vira um X. E quando eu clicar no link ele voltar para o HAMBURGUER. <nav class="navbar navbar-default navbar-fixed-top"> <!--INICIO DIV CONTAINER ONDE VAI TODAS AS INFORMAÇÕES--> <div class="container-fluid containertop" id="topoinicio"> <div class="navbar-header"> <!--INICIO CONFIGURAÇÃO MENU HAMBERGUER--> <button type="button" class="navbar-toggle menuHamburguer" data-toggle="collapse" data-target="#menu-navegacao"> <span class="icon-bar top-bar"></span> <span class="icon-bar middle-bar"></span> <span class="icon-bar bottom-bar"></span> </button> <!--FIM CONFIGURAÇÃO MENU HAMBERGUER--> <!--INICIO LOGO MARCA--> <!--<a class="navbar-brand" href="#page-top"> <span class="iden">Iden</span> <span class="techonology">Technology</span> </a>--> <ol class="nav"> <ol class="menu" style="border:none;"> <a href="#home"> <img src="img/ico_3.png" class="img-responsive img-rounded imgLogo"> </a> </ol> </ol> <!--FIM LOGO MARCA--> </div> <!--INICIO MENU LINK--> <div class="collapse navbar-collapse menu-navegacao" id="menu-navegacao"> <ul class="nav navbar-nav navbar-right"> <li class="menu"> <a href="#home">HOME</a> </li> <li class="menu"> <a href="#solucoes">SOLUÇÕES</a> </li> <li class="menu"> <a href="#servicos">SERVIÇOS</a> </li> <li class="menu"> <a href="#empresa">EMPRESA</a> </li class="menu"> <li class="menu"> <a href="#localizacao">LOCALIZAÇÃO</a> </li> <li class="menu"> <a href="#contato">CONTATO</a> </li> <li class="abrirlink"> <a href="https://identechnology.tomticket.com?account=444224P07112016122136" title="Acessar Help Desk" target="_blank">TICKET<a> </li> </ul> </div> <!--FIM MENU LINK--> </div> <!--FIM DIV CONTAINER ONDE VAI TODAS AS INFORMAÇÕES--> </nav> Eu tenho esse código abaixo CSS, que funciona um pouco. Só que o ele ja abre com o X. <style type="text/css"> .navbar-toggle { border: none; background: transparent !important; } .navbar-toggle:hover { background: transparent !important; } .navbar-toggle .icon-bar { width: 22px; transition: all 0.2s; } .navbar-toggle .top-bar { transform: rotate(45deg); transform-origin: 10% 10%; } .navbar-toggle .middle-bar { opacity: 0; } .navbar-toggle .bottom-bar { transform: rotate(-45deg); transform-origin: 10% 90%; } .navbar-toggle.collapsed .top-bar { transform: rotate(0); } .navbar-toggle.collapsed .middle-bar { opacity: 1; } .navbar-toggle.collapsed .bottom-bar { transform: rotate(0); } </style> Veja a imagem abaixo de quando eu entro no site. Ele entra com o X. E quando eu clico pela primeira vez no X, ele continua o x. E quando pela segunda vez clico no X ou clico em menu da lista ele volta para o HAMBURGUER. Para ajudar, segue o link do site. Iden Technology