Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
navegador2

CSS Fontes de Site e Configurar Font H1, não dá.

Recommended Posts

Caros colegas

Já dei uma boa estuda, mas ainda tenho dúvidas sobre qual é atualmente o consenso quanto a unidade de fontes mais prática para os sites responsivos.

Então é o mesmo caso do desing responsivo, tem para todo gosto: Tem gente que fala para usar em fontes: %, outros em, outros  rem.... Então sobre as fontes eu criei o site usando percentagens, mas sinceramente não vi grandes vantagens sobre os pixels. Eu achei que as fontes em percentagens quando diminuissem a resolução elas ficariam menores, e não aconteceu, tive que usar a Media Queries para contornar.

Usando o critério de boa legibilidade qual a mellhor unidade para se usar e o tipo de fonte?

Outra pergunta é que estou apanhando para ajustar o h1 dos títulos das páginas.  Quero por exemplo quando a resolução for menor que 480 a letra do h1 fique menor. O curioso é que usei o código parecido para os paragrafos e deu certo, no h1 não dá. Posto o código dos h1 e o css. Que acho que são importantes para a questão.

html da pagina

<section id="conteudo"> <!--Conteudo Central do Site-->

<h1 >AVALIAÇÕES DOS CLIENTES</h1>


<p class="justificar">
Nós já tinhamos um armário planejado, porém quando encomendamos pedimos ao rapaz que fez para que fizesse as gavetas bem grandes para que pudessemos guardar nossas compras. Então depois de instalado vimos que não era prático, já que as gavetas ficavam pesadas para abrir e fechar, o primeiro marceneiro não foi culpado já que nós que pedimos para fazer assim. Então pedi para outro marceneiro fazer um orçamento para arrumar as gavetas, e ele respondeu que estava apertado que só depois de 90 dias, e até hoje não deu retorno.
<p class="justificar">Então por indicação do meu filho chamamos a Bac Móveis Planejados. O Carlos marcou a data que pegaria as gavetas para adequar as nossas novas necessidades. Ele ligou antes, e veio pontualmente, na data combinada pegar as gavetas. Ele entregou o serviço também como combinado. E onde tinha 2 gavetas ele fez 3. Elas agora ficaram fáceis de abrir e fechar, e nem parece que o serviço não foi o original. Nós recomendamos muito os serviços dele. </p>

<p class="justificar">Considero uma empresa muito séria, que respeita o consumidor e os produtos são de alta qualidade. Parabéns! Excelente empresa, de qualidade e pontualidade.</p>

<p> <span class="destacar"> Marlene e João </span></p>

<p class="justificar"> Conhecemos a Bac Móveis planejado por indicação de um colega nosso, que é muito exigente, olha que quem passa no controle de qualidade dele, só pode ser bom mesmo. Ele falou que o Carlos era ótimo, que ele é pontual e muito detalhista, então marcamos com ele para fazer um orçamento para nós.</p>



</section> <!--Fim Conteudo Central do site-->

CSS
@charset "utf-8";
/* CSS Document */


body {

	margin:0px;
	padding:0px;
	background-image:url(../imagens/bgfundo.jpg);
	font-size:100%; /* Igual  a 16px pelo navegador*/
	
}
}

h1 {
	font-family::Verdana, Geneva, sans-serif;
	color:#FFFFFF;
	text-align: left;
		
}


p.justificar {
	text-align:justify;
	font-size:110%;
}

section#conteudo {
	clear:both;
	background-image:url(../imagens/mdf1.jpg);
	color:#FFF;
	
	font-family:Verdana, Geneva, sans-serif;
	margin-left:auto;
	margin-right:auto;
	text-align:justify;
	width:98%;
	padding-left:1%;
	padding-right:1%;
	padding-top:1%;
	padding-bottom:1%;
	max-width:1000px;
	position:relative;
	}

	@media all and (max-width:479px) {
	
	
h1 {
		font-size:20px;
	
	}
	
	
	p.justificar {
		font-size:90%;
	}
		
}

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

@navegador2 Olá.

 

3 horas atrás, navegador2 disse:

tive que usar a Media Queries para contornar.

Media queries é o recomendado para estes casos mesmo.

 

3 horas atrás, navegador2 disse:

O curioso é que usei o código parecido para os paragrafos e deu certo, no h1 não dá.

O elemento H1 funciona normalmente, como qualquer outra! :thumbsup:

 

 

3 horas atrás, navegador2 disse:

qual a mellhor unidade para se usar e o tipo de fonte?

Não existe melhor! Tudo depende da exigência do momento.

Tanto, %, quanto EM, PX, PT servem para definir o tamanho da fonte.

Mas posso destacar uma nova medida que foi criada exclusivamente para a responsividade que é o VW. Refere-se ao viewport.

 

Veja um exemplo online com Pixel: https://jsfiddle.net/dife/ctcutota/

 

Agora veja este outro exemplo usando as novas medidas para viewport: https://jsfiddle.net/dife/ctcutota/1/

 

Só lembre que para funcionar corretamente, você deve ter o meta-tag  viewport

 

Materiais para estudo:

Tipografia CSS responsivo

Medidas novas VW, VH, VMIN, VMAX, EX, CH para responsividade

Calculador VW e PX

Compartilhar este post


Link para o post
Compartilhar em outros sites
  • Autor do tópico
  • Dif, valeu as dicas!
    Sobre estas unidades a vw e hw eu já tinha lido, mas nunca tinha usado, ficou bacana.


    Sobre o h1, no SEUexemplo vi que ficou responsivo, mas vi que o problema esta na visualização, porque como você viu, no código parece não ter nenhum erro.
    Usei o visualizador livewave online e deu certo, ficou responsivo usando o mesmo código que vinha usando. Eu ainda não tinha usando estes visualizadores online porque nas páginas que estou fazendo porque elas tem imagens... Então até agora eu vinha testando o meu código localmente usando o wamp, mas vejo que algumas alterações que agente faz ele não atualiza imediatamente, algumas não atualizam no chrome e só no internet explorer...

    Enfim é bem chato este problema e a cada modificação enviar o arquivo para o servidor e testar online, sem saber se terá que alterar novamente não é pratico.
    Neste exemplo do código que postei cheguei a pensar que o media querie estava errado, mas fiz um teste mudando a cor do h1 para vermelho quando chegasse em 480px funcionou perfeitamente. 
    Resumindo sobre o h1 o problema era estar testando usando o localhost, no testador online ficou ok, perdi muito tempo tentando ver qual era o erro. E o engraçado que quase ninguém em vídeo aulas, ou livros fala dos testadores online, a maioria usa o servidor local. Vivendo e aprendendo.
    Mais uma vez obrigado.
     

    • Curtir 1

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    @navegador2 Para ser sincero, nem uso testadores online.

     

    Basicamente uso o CTRL + F5, que faz uma atualização na página zerando o cache. Se não dá certo da primeira vez, eu tento pela segunda aí funciona.

     

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    Apenas complementando o que o @DiF já disse, para se trabalhar com responsividade você precisa manipular as @media queries do css. Assim, você consegue setar tranquilamente o comportamento do site em diversos dispositivos. Pode ser que num computador o h1 tenha font-size 30px, enquanto que num dispositivo com width < 450px o h1 vai ter um font-size de 16px. Assim não precisa trabalhar com % ou vh e etc, e sim, trabalhar com o tamanho do dispositivo.

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites
  • Autor do tópico
  • Veja a última. Como falei testei o código nos serviços online. E o h1 esta responsivo. Usei o livewave.com.

    Então como falei achei que estava resolvido, fiz o upload do MESMO código, e ele não fica respnsivo.abaixo de 479px de resolução Sinceramente não sei mais o que está acontecendo. No parágrafo usando o mesmo código fica.

    Então nos serviços online fica OK. Já no localhost e agora no próprio servidor não dá.

    Vou postar o css e o html da página conteudoavaliaçoes, porque fiz algumas mudanças e por fim. Posto o link, no servidor. Ele não está totalmente ajustado para resoluçoões menores, devido a este abacaxi.

    Um detalhe que talvez penso que pode estar ocasionando é que eu crium uma pagina em php, que chama 4 arquivos: header.php, conteudo.php, footer.php, e webdesing.php. Apesar de não conhecer php, faço isto porque aprendi na internet e é super prático, quando altera o rodapé ele muda em todas as páginas. Então apesar de usar isto há muito tempo e não ter tido problema, pensei que talvez isto possa estar influcenciando. Já que nos testadores online eu testo só a pagina conteudoavaliações, no html e no css.

    <section id="conteudo"> <!--Conteudo Central do Site-->
    
    <h1 >AVALIAÇÕES DOS CLIENTES</h1>
    
    
    <p class="justificar">
    Nós já tinhamos um armário planejado, porém quando encomendamos pedimos ao rapaz que fez para que fizesse as gavetas bem grandes para que pudessemos guardar nossas compras. Então depois de instalado vimos que não era prático, já que as gavetas ficavam pesadas para abrir e fechar, o primeiro marceneiro não foi culpado já que nós que pedimos para fazer assim. Então pedi para outro marceneiro fazer um orçamento para arrumar as gavetas, e ele respondeu que estava apertado que só depois de 90 dias, e até hoje não deu retorno.
    <p class="justificar">Então por indicação do meu filho chamamos a Bac Móveis Planejados. O Carlos marcou a data que pegaria as gavetas para adequar as nossas novas necessidades. Ele ligou antes, e veio pontualmente, na data combinada pegar as gavetas. Ele entregou o serviço também como combinado. E onde tinha 2 gavetas ele fez 3. Elas agora ficaram fáceis de abrir e fechar, e nem parece que o serviço não foi o original. Nós recomendamos muito os serviços dele. </p>
    
    <p class="justificar">Considero uma empresa muito séria, que respeita o consumidor e os produtos são de alta qualidade. Parabéns! Excelente empresa, de qualidade e pontualidade.</p>
    
    <p> <span class="destacar"> Marlene e João </span></p>
    
    <p class="justificar"> Conhecemos a Bac Móveis planejado por indicação de um colega nosso, que é muito exigente, olha que quem passa no controle de qualidade dele, só pode ser bom mesmo. Ele falou que o Carlos era ótimo, que ele é pontual e muito detalhista, então marcamos com ele para fazer um orçamento para nós.</p>
    
    <p class="justificar"> Ele veio no horário marcado e diferentemente das outras pessoas não tentou vender nada, mas agiu como um grande consultor: Orientou, sugeriu, nos alertou... Enfim depois de conversar com ele. Sabiámos melhor ainda sobre qual seria a melhor escolha, do que antes, quando pensávamos já saber o que queríamos.. O Carlos, inclusive deu dicas valiosas sobre como: reduzir o preço do serviço, sem diminuir a qualidade, falando que um espelho que minha esposa queria, teria um custo benefício melhor se fosse feito de um modo diferente.</p>
    
    <p class="justificar"> Para finalizar comentei com ele um serviço que meus pais estavam precisando, que um outro marceneiro não deu retorno. Ele foi lá fez o orçamento. Entregou o serviço como combinado e eles ficaram super satisfeitos.</p>
    
    <p class="justificar">Quanto ao nosso serviço tudo correu como combinado, os prazos e condições que ele prometeu, foram totalmente cumpridos.
    Recomendamos a Bac Móveis Planejados pela qualidade, pontualidade e honestidade representadas na pessoa prestativa e carismática do Carlos.</p>
    
    <p> <span class="destacar"> Simone Pereira </span></p>
    
    </section> <!--Fim Conteudo Central do site-->
    @charset "utf-8";
    /* CSS Document */
    
    
    /*Ajusta imagens no redimencionamento*/
    
    img, object, embed, video{
    	max-width:100%;
    }
    
    
    
    body {
    
    	margin:0px;
    	padding:0px;
    	background-image:url(../imagens/bgfundo.jpg);
    	font-size:100%; /* Igual  a 16px pelo navegador*/
    	
    }
    
    header {
    	clear:both;
    	background-color:#45484d;
    	text-align:center;
    	width:98%;
    	padding-top:1%;
    	padding-left:1%;
    	padding-right:1%;
    	padding-bottom:1%;
    	max-width:1000px;
    	margin:auto;	
    	
    	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#45484d+0,000000+100;Black+3D+%231 */
    background: #45484d; /* Old browsers */
    background: -moz-linear-gradient(top, #45484d 0%, #000000 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #45484d 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #45484d 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
    
    	
    }
    
    nav {
    	Clear: both;
    	background-color: #000;
    	height: 40px;
    	color: #FFF;
    	Font-family: "Arial Black", Gadget, sans-serif;
    	Font-size: 110%;
    	Font-weight: Bold;
    	margin-left: auto;
    	margin-right: auto;
    	width: 100%;
    	padding-left: 0%;
    	padding-right: 0%;
    	max-width: 1000px;
    	text-align: center;
    }
    
    
    
    section#conteudo {
    	clear:both;
    	background-image:url(../imagens/mdf1.jpg);
    	color:#FFF;
    	
    	font-family:Verdana, Geneva, sans-serif;
    	margin-left:auto;
    	margin-right:auto;
    	text-align:justify;
    	width:98%;
    	padding-left:1%;
    	padding-right:1%;
    	padding-top:1%;
    	padding-bottom:1%;
    	max-width:1000px;
    	position:relative;
    	
    }
    
    h1 {
    	font-family:Verdana, Geneva, sans-serif;
    	color:#FFFFFF;
    	text-align: left;
    		
    }
    
    
    p.justificar {
    	text-align:justify;
    	font-size:110%;
    }
    
    
    
    
    img.centralizar {
    	display:block;
    	margin-left:auto;
    	margin-right:auto;
    }
    
    
    section#conteudomin {
    	clear:both;
    	background-image:url(../imagens/mdf1.jpg);
    	font-family:Verdana, Geneva, sans-serif;
    	padding-top:0px;
    	padding-bottom:0px;
    	margin:auto;
    	text-align:center;
    	width:100%;
    	padding-left:0%;
    	padding-right:0%;
    	max-width:1000px;
    	position:relative;
    	
    }
    
    
    div.item {
    	background-color:#999;
    	height:20%;
    	padding:0.5%;
    	text-align:center;
    	float:left;
    	margin:0.1%;
    	border:#d4dcde 1 px solid;
    	width:18%;
    
    }
    
    span.destacar{
    	color:#fff;
    	font-size:90%;
    	font-weight:bold;
    	
    }
    
    
    
    
    #player{
    	height:1%;
    	margin:auto;	
    	display: none;
    }
    
    
    footer {
    	Clear: both;
    	background-color:#45484d;
    	padding-top: 0%;
    	padding-bottom: 0%;
    	color: #FFF;
    	Font-family: "Arial Black", Gadget, sans-serif;
    	font-size: 110%;
    	font-weight: bold;
    	margin-left:auto;
    	margin-right:auto;
    	width: 98%;
    	padding-left: 1%;
    	padding-right: 1%;
    	max-width: 1000px;	
    	text-align: center;
    	
    	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#45484d+0,000000+100;Black+3D+%231 */
    background: #45484d; /* Old browsers */
    background: -moz-linear-gradient(top, #45484d 0%, #000000 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #45484d 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #45484d 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
    	
    }
    
    section#webdesigner {
    	clear:both;
    	padding-top:0%;
    	color:#000;
    	font-family:Verdana, Geneva, sans-serif;
    	font-size:100%;
    	font-weight:bold;
    	margin-left:auto;
    	margin-right:auto;
    	width: 98%;
    	padding-left: 1%;
    	padding-right: 1%;
    	max-width: 1000px;	
    	text-align: center;
    	
    }
    
    
    @media all and (max-width:479px) {
    	
    	nav {
    		height:160px;
    	}
    	
    h1 {
    		font-size:14px;
    	
    	}
    	
    	
    	p.justificar {
    		font-size:90%;
    	}
    	
    	
    span.destacar{
    	font-size:75%;
    	
    }
    
    footer {
    	font-size:100%;
    }
    
    section#webdesigner {
    	font-size:90%;
    
    }
    
    
    }
    
    @media all and (max-width:969px){
    	nav {
    		height:85px;
    	}
    	
    	
    }

     

    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






    Sobre o Clube do Hardware

    No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações 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

    ×