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

navegador2 · 21 de setembro de 2017

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%;
	}
		
}

DiF · 21 de setembro de 2017

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

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

navegador2 · 25 de setembro de 2017

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.

DiF · 25 de setembro de 2017

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

Felipe Paz · 26 de setembro de 2017

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.

navegador2 · 26 de setembro de 2017

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;
	}
	
	
}