examples/amp-fit-text.amp.html - main - githubmirror/amphtml

examples/amp-fit-text.amp.html
74 строки6 KB
Caroline Liu
Apply lang="en" to examples/ (#34759)
10 июн 2021, 17:30
10 июн 2021, 17:302ee75c4
<!doctype html>
<html ⚡ lang="en">
<head>
    <script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>
    <meta charset="utf-8">
    <title>amp-fit-text</title>
    <link rel="canonical" href="https://amp.dev/documentation/examples/components/amp-fit-text/index.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
      <script async src="https://cdn.ampproject.org/v0.js"></script>
      <style amp-custom>
    :root {
      --color-primary: #005AF0;
      --color-text-light: #fff;
      --space-1: .5rem;  /* 8px */
    }
    .square-small, .square-medium, .square-large {
      display: inline-block;
      margin: var(--space-1);
      color: var(--color-text-light);
      background-color: var(--color-primary);
    }
    .square-small {
      height: 100px;
      width:  100px;
    }
    .square-medium {
      height: 200px;
      width:  200px;
    }
    .square-large {
      height: 300px;
      width:  300px;
    }
      </style>
  </head>
  <body>
    <!--
      Basic usage
      In each of these examples, the `amp-fit-text` element is nested within a container with fixed dimensions to demonstrate the differences in attributes and layout values. When `amp-fit-text` is used with a given `height`, `width`, and `layout="responsive"` attribute, the text will scale to fit the parent container.
    -->
    <div>
      <div class="square-small"><amp-fit-text id="basic small" width="1" height="1" layout="responsive">Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.</amp-fit-text></div>
      <div class="square-medium"><amp-fit-text id="basic medium" width="1" height="1" layout="responsive">Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.</amp-fit-text></div>
      <div class="square-large"><amp-fit-text  id="basic large" width="1" height="1" layout="responsive">Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.</amp-fit-text></div>
    </div>
    <!--
      Aspect ratio
      The text will scale responsively in the ratio defined by the responsive layout, but not exceed the size of its parent. This sample defines an aspect ratio of 1.5:1 (3:2).
    -->
    <div>
      <div class="square-small"><amp-fit-text id="aspect small" 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>
      <div class="square-medium"><amp-fit-text id="aspect medium" 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>
      <div class="square-large"><amp-fit-text id="aspect large" 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>
    </div>
    <!--
      min-font-size
      The `min-font-size` attribute dictates a minimum size for the text.  In this case, we've dictated a minimum of 30, which will cause it to exceed the size of its fixed block parent and be truncated to fit as appropriate.
    -->
    <div>
      <div class="square-small"><amp-fit-text id="min small" width="200" height="200" layout="responsive" min-font-size="18">Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.</amp-fit-text></div>
      <div class="square-medium"><amp-fit-text id="min medium" width="200" height="200" layout="responsive" min-font-size="18">Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.</amp-fit-text></div>
      <div class="square-large"><amp-fit-text id="min large" width="200" height="200" layout="responsive" min-font-size="18">Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.</amp-fit-text></div>
    </div>
    <!--
      max-font-size
      The `max-font-size` attribute dictates a maximum size for the text.  In this case, we've dictated a maximum of 10, ensuring it won't fill the size of its parent element.
    -->
    <div>
      <div class="square-small"><amp-fit-text id="max small" width="200" height="200" layout="responsive" max-font-size="18">Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.</amp-fit-text></div>
      <div class="square-medium"><amp-fit-text id="max medium" width="200" height="200" layout="responsive" max-font-size="18">Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.</amp-fit-text></div>
      <div class="square-large"><amp-fit-text id="max large" width="200" height="200" layout="responsive" max-font-size="18">Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.</amp-fit-text></div>
    </div>
</body></html>