css3 - letra - style font size html
¿Cómo implementar max-font-size? (3)
En algún momento, el font-size excede la escala de 36px derecha, encuentra eso. Suponiendo que supera cuando el width: 2048px :
@media screen and (min-width: 2048px) {
.selector {
font-size: 36px;
}
}
Sí, desafortunadamente necesitas usar las consultas @media . Espero que eso no afecte nada.
Quiero especificar mi tamaño de fuente usando vw , como en
font-size: 3vw;
Sin embargo, también quiero limitar el tamaño de la fuente para decir 36px. ¿Cómo puedo lograr el equivalente de max-font-size , que no existe? ¿Es la única opción para usar consultas de medios?
Otra forma aumenta el tamaño de la fuente lentamente, esto no limitará el tamaño máximo de la fuente, pero incluso en anchos muy amplios se verá mejor. No responde la pregunta de manera perfecta, pero su 1 línea ...
font-size: calc(16px + 1vw);
font-size: 3vw; significa que el tamaño de fuente será del 3% del ancho de la ventana gráfica. Entonces, cuando el ancho de la ventana gráfica sea 1200 px, el tamaño de la fuente será 3% * 1200 px = 36 px.
Por lo tanto, se puede implementar fácilmente un tamaño de fuente máximo de 36 px utilizando una sola consulta de medios para anular el valor de tamaño de fuente predeterminado de 3vw.
Demostración de Codepen (Resize Browser)
div {
font-size: 3vw;
}
@media screen and (min-width: 1200px) {
div {
font-size: 36px;
}
}
<div>hello</div>
Dicho esto, usar las unidades de la ventana gráfica para font-size de font-size la manera anterior es problemático porque cuando el ancho de la ventana gráfica es mucho más pequeño, por ejemplo, 320 px, el tamaño de la fuente representada será de 0.03 x 320 = 9.6 px, que es muy (muy) pequeño.
Para superar este problema, puedo recomendar el uso de una técnica llamada Fluid Type AKA CSS Locks .
Un bloqueo CSS es un tipo específico de cálculo de valor CSS donde:
- hay un valor mínimo y un valor máximo,
- y dos puntos de interrupción (generalmente basados en el ancho de la ventana gráfica),
- y entre esos puntos de interrupción, el valor real va linealmente desde el mínimo al máximo.
( De este artículo sobre los bloqueos de CSS, que también explica las matemáticas involucradas con gran detalle).
Así que digamos que queremos aplicar la técnica anterior de modo que el tamaño de fuente mínimo sea 16px en un ancho de ventana gráfica de 600px o menos, y aumentará linealmente hasta que alcance un máximo de 32px en un ancho de ventana gráfica de 1200px.
Podríamos usar esta mezcla SASS que hace todos los cálculos para que el CSS se vea algo como esto:
/*
1) Set a min-font-size of 16px when viewport width < 600px
2) Set a max-font-size of 32px when viewport width > 1200px and
3) linearly increase the font-size from 16->32px
between a viewport width of 600px-> 1200px
*/
div {
@include fluid-type(font-size, 600px, 1200px, 16px, 32px);
}
// ----
// libsass (v3.3.6)
// ----
// =========================================================================
//
// PRECISE CONTROL OVER RESPONSIVE TYPOGRAPHY FOR SASS
// ---------------------------------------------------
// Indrek Paas @indrekpaas
//
// Inspired by Mike Riethmuller''s Precise control over responsive typography
// http://madebymike.com.au/writing/precise-control-responsive-typography/
//
// `strip-unit()` function by Hugo Giraudel
//
// 11.08.2016 Remove redundant `&` self-reference
// 31.03.2016 Remove redundant parenthesis from output
// 02.10.2015 Add support for multiple properties
// 24.04.2015 Initial release
//
// =========================================================================
@function strip-unit($value) {
@return $value / ($value * 0 + 1);
}
@mixin fluid-type($properties, $min-vw, $max-vw, $min-value, $max-value) {
@each $property in $properties {
#{$property}: $min-value;
}
@media screen and (min-width: $min-vw) {
@each $property in $properties {
#{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)});
}
}
@media screen and (min-width: $max-vw) {
@each $property in $properties {
#{$property}: $max-value;
}
}
}
// Usage:
// ======
// /* Single property */
// html {
// @include fluid-type(font-size, 320px, 1366px, 14px, 18px);
// }
// /* Multiple properties with same values */
// h1 {
// @include fluid-type(padding-bottom padding-top, 20em, 70em, 2em, 4em);
// }
////////////////////////////////////////////////////////////////////////////
div {
@include fluid-type(font-size, 600px, 1200px, 16px, 32px);
}
@media screen and (max-width: 600px) {
div {
font-size: 16px;
}
}
@media screen and (min-width: 1200px) {
div {
font-size: 36px;
}
}
<div>Responsive Typography technique known as Fluid Type or CSS Locks.
Resize the browser window to see the effect.
</div>
Codepen Demo
Otras lecturas
Control preciso sobre tipografía responsiva.