¿Instrucciones para insertar amp-fit-text?
amp-fit-text
El componente amp-fit-text le permite gestionar el tamaño y el ajuste del texto dentro de un área determinada.
Preparar
Ingrese el script amp-fit-text justo abajo de la apertura <head>
Uso básico
En cada uno de estos ejemplos, el elemento <amp-fit-text> está anidado dentro de un bloque div gris 200x200 para demostrar diferencias en atributos y valores de diseño.
Cuando se utiliza amp-fit-text con una height, un width y un layout="responsive", el texto se escalará en la proporción proporcionada pero no excederá el tamaño de su padre.
Relación de aspecto: 1.5: 1 (3: 2)
Relación de aspecto: 1:1
El atributo min-font-size indica un tamaño mínimo para el texto. En este caso, hemos dictado un mínimo de 30, lo que hará que exceda el tamaño de su padre de bloque fijo y se trunque para ajustarse como sea apropiado.
El atributo max-font-size indica un tamaño máximo para el texto. En este caso, hemos dictado un máximo de 10, asegurando que no llene el tamaño de su elemento padre.
Cuando se utiliza amp-fit-text con una height determinada y el atributo layout="fixed-height", se ajustará al tamaño de su altura dada (200) y ajustará el ancho según sea necesario para mantenerse dentro de los límites de su padre envase.
Preparar
Ingrese el script amp-fit-text justo abajo de la apertura <head>
<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>
Uso básico
En cada uno de estos ejemplos, el elemento <amp-fit-text> está anidado dentro de un bloque div gris 200x200 para demostrar diferencias en atributos y valores de diseño.
Cuando se utiliza amp-fit-text con una height, un width y un layout="responsive", el texto se escalará en la proporción proporcionada pero no excederá el tamaño de su padre.
Relación de aspecto: 1.5: 1 (3: 2)
Ejemplo<div class="fixedblock"> <amp-fit-text width="300" height="200" layout="responsive">Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.</amp-fit-text> </div>Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.
Relación de aspecto: 1:1
Ejemplo<div class="fixedblock"> <amp-fit-text width="200" height="200" layout="responsive">Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.</amp-fit-text> </div>Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.
El atributo min-font-size indica un tamaño mínimo para el texto. En este caso, hemos dictado un mínimo de 30, lo que hará que exceda el tamaño de su padre de bloque fijo y se trunque para ajustarse como sea apropiado.
Ejemplo<div class="fixedblock"> <amp-fit-text width="300" height="200" layout="responsive" min-font-size="30">Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.</amp-fit-text> </div>Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.
El atributo max-font-size indica un tamaño máximo para el texto. En este caso, hemos dictado un máximo de 10, asegurando que no llene el tamaño de su elemento padre.
Ejemplo<div class="fixedblock"> <amp-fit-text width="300" height="200" layout="responsive" max-font-size="10">Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.</amp-fit-text> </div>Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.
Cuando se utiliza amp-fit-text con una height determinada y el atributo layout="fixed-height", se ajustará al tamaño de su altura dada (200) y ajustará el ancho según sea necesario para mantenerse dentro de los límites de su padre envase.
Ejemplo<div class="fixedblock"> <amp-fit-text height="200" layout="fixed-height">Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.</amp-fit-text> </div>Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.
Comentarios
Disqus comments:
Facebook comments: