如何在手机的图像下制作文字 go？

Question

<!DOCTYPE html>
<html amp lang="en">
  <head>
    <meta charset="utf-8" />
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Reliant Industrial Supply</title>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link
      rel="canonical"
      href="https://http://www.reliantindustrialsupply.com/"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Work+Sans:300,600"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Sora:wght@200&display=swap"
    />
    <meta
      name="viewport"
      content="width=device-width,minimum-scale=1,initial-scale=1"
    />
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": ["logo.jpg"]
      }
    </script>
    <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
    >

    <style amp-custom>
      :root {
        --background: rgba(299, 299, 299, 0.95);
      }

      *,
      *::before,
      *::after {
        box-sizing: border-box;
        font-family: "Work Sans";
      }

      /* navigation styles start here */

      .header {
        background: var(--background);
        text-align: center;
        position: fixed;
        z-index: 999;
        width: 100%;
      }

      .nav-toggle {
        position: absolute;
        top: -9999px;
        left: -9999px;
      }

      .nav-toggle:focus ~ .nav-toggle-label {
        outline: 3px solid rgba(lightblue, 0.75);
      }

      .nav-toggle-label {
        position: absolute;
        top: 0;
        left: 0;
        margin-left: 1em;
        height: 100%;
        display: flex;
        align-items: center;
      }

      .nav-toggle-label span,
      .nav-toggle-label span::before,
      .nav-toggle-label span::after {
        display: block;
        background: black;
        height: 2px;
        width: 2em;
        border-radius: 2px;
        position: relative;
      }

      .nav-toggle-label span::before,
      .nav-toggle-label span::after {
        content: "";
        position: absolute;
      }

      .nav-toggle-label span::before {
        bottom: 7px;
      }

      .nav-toggle-label span::after {
        top: 7px;
      }

      nav {
        position: absolute;
        text-align: left;
        top: 100%;
        left: 0;
        background: var(--background);
        width: 100%;
        transform: scale(1, 0);
        transform-origin: top;
        transition: transform 400ms ease-in-out;
      }

      nav ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      nav li {
        margin-bottom: 1em;
        margin-left: 1em;
      }

      nav a {
        color: black;
        text-decoration: none;
        font-size: 1.2rem;
        text-transform: uppercase;
        opacity: 0;
        transition: opacity 150ms ease-in-out;
      }

      nav a:hover {
        color: #000;
      }

      .nav-toggle:checked ~ nav {
        transform: scale(1, 1);
      }

      .nav-toggle:checked ~ nav a {
        opacity: 1;
        transition: opacity 250ms ease-in-out 250ms;
      }

      amp-carousel {
        padding-top: 20em;
      }

      
      @media screen and (min-width: 800px) {
        .nav-toggle-label {
          display: none;
        }

        .header {
          display: grid;
          grid-template-columns: 1fr auto minmax(600px, 3fr) 1fr;
        }

        .logo {
          grid-column: 2 / 3;
        }

        nav {
          position: relative;
          text-align: left;
          transition: none;
          transform: scale(1, 1);
          background: none;
          top: initial;
          left: initial;

          grid-column: 3 / 4;
          display: flex;
          justify-content: flex-end;
          align-items: center;
        }

        nav ul {
          display: flex;
        }

        nav li {
          margin-left: 3em;
          margin-bottom: 0;
        }

        nav a {
          opacity: 1;
          position: relative;
        }

        nav a::before {
          content: "";
          display: block;
          height: 5px;
          background: black;
          position: absolute;
          top: -0.75em;
          left: 0;
          right: 0;
          transform: scale(0, 1);
          transition: transform ease-in-out 250ms;
        }

        nav a:hover::before {
          transform: scale(1, 1);
        }
      }

      amp-carousel {
        top: 0em;
        padding-bottom: 5em;
      }

      .content {
        background-color: dark-grey;
      }
      .Centered {
        text-align: center;
        font-family: "Work Sans";
        font-style: normal;
        font-weight: 300;
        padding-bottom: 2em;
      }

      .left {
        margin: 2rem;
        font-family: 'Sora', sans-serif;
        font-style: normal;
        font-weight: 300;
      }

      .clearfix {
        overflow: auto;
        display: flex;
        padding-bottom: 5em;
      }

      .footer {
          width: 100vw;
          display: block;
          overflow: hidden;
          padding: 20px 0;
          box-sizing: border-box;
          background-color: #18181a;
      }

      .innerFooter {
          display: block;
          margin: 0 auto;
          width: 1100px;
          height: 100%;
      }

      .innerFooter .logoContainer {
        width: 35%;
        float: left;
        height: 100%;
        display: block;
      }

      .innerFooter .footerThird {
        padding-left: 20px;
        width: calc(21.66666667 - 20px);
        margin-right: 10px;
        float: left;
        height: 100%;
      }

      .innerFooter .footerThird:last-child {
        margin-right: 0;

      }

      .innerFooter .footerThird h1{
        font-family: 'Work Sans';
        font-size: 22px;
        color: white;
        display: block;
        width: 100%;
        margin-bottom: 20px;
      }

      .innerFooter span {
        font-family: 'Work Sans';
        font-size: 12px;
        color: white;
      }
    </style>

    <script
      async
      custom-element="amp-carousel"
      src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js"
    ></script>
    <script
      async
      custom-element="amp-video"
      src="https://cdn.ampproject.org/v0/amp-video-0.1.js"
    ></script>
  </head>
  <body>
  <div class="header">
    <amp-img
    src="https://i.imgur.com/vPr7fdQ.png"
    width="175px"
    height="50px"
    ></amp-img>
    <input type="checkbox" id="nav-toggle" class="nav-toggle" />
    <nav>
      <ul>
        <li>
          <a
            href="file:///C:/Users/pilot/Documents/GitHub/AMP/Home/Home-Page.html"
            >Home</a
          >
        </li>
        <li><a href="file:///C:/Users/pilot/Documents/GitHub/AMP/Products/products_page.html">Products</a></li>
        <li>
          <a
            href="file:///C:/Users/pilot/Documents/GitHub/AMP/Contact/Contact.html"
            >Contact</a
          >
        </li>
      </ul>
    </nav>
    <label for="nav-toggle" class="nav-toggle-label">
      <span></span>
    </label>
  </div>


    <amp-carousel
      layout="fixed-height"
      type="slides"
      height="900"
      width="auto"
      controls
      loop
      autoplay
      delay="3000"
      data-next-button-aria-label="Go to next slide"
      data-previous-button-aria-label="Go to previous slide"
    >
      <amp-img
        src="https://i.imgur.com/6H2AFQm.png"
        width="1280"
        height="720"
      ></amp-img>
      <amp-img
        src="https://i.imgur.com/6jOfwYY.png"
        width="1280"
        height="720"
      ></amp-img>
      <amp-img
        src="https://i.imgur.com/AFq0mSz.png"
        width="1280"
        height="720"
      ></amp-img>
      <amp-img
        src="https://i.imgur.com/7tMi95w.png"
        width="1280"
        height="720"
      ></amp-img>
      <amp-img
        src="https://i.imgur.com/G020qk3.png"
        width="1280"
        height="720"
      ></amp-img>
      <amp-video
        layout="fixed"
        autoplay
        loop
        width="1280"
        height="720"
        poster="https://i.imgur.com/lNFDJb1.png"
      >
        <source src="https://i.imgur.com/3TFahoU.mp4" type="video/mp4" />
        <div fallback>
          <p>This browser does not support this video element.</p>
        </div>
      </amp-video>
    </amp-carousel>

    <div class="content">
      <h1 class="Centered">
        Providing solutions for all your surface treatments
      </h1>

      <div class="clearfix">
        <div>
          <p class="left">
            Reliant Industrial Supply provides solutions for all your surface
            treatments.Our supplier sia Coated Abrasives, the oldest abrasive
            manufacturer in the world, brings one of the best abrasives on the
            market. We supply Flex Trim brushes for all liner and carousel
            sanding needs. We provide AirVantage Sanders and Coilhose
            Pneumatics, for when you want the best quality handsanding tools and
            results. When it comes to machines, we have one of the best and also
            one of the most experienced machinery manufacturers, Timesavers Wide
            Belt Sanders. For cutting and shaping we have a wide variety of
            Exchangeable Saw Blades and Router Bits. Whether cutting, shaping or
            sanding, you can rely on Reliant. We provide solutions for surface
            preparation through complete sanding systems which include coated
            abrasives, pneumatic sanders and machinery.
          </p>
        </div>

        <div>
          <img class="right" src="https://i.imgur.com/u8hDnzX.jpg" layout="responsive" width="800px;" height="300px;"/>
        </div>
      </div>
      <div class="footer">
        <div class="innerFooter">
          <div class="logoContainer">
            <amp-img src="https://i.imgur.com/jlRKmij.jpg" height="109" width="200">
          </div>

          <div class="footerThird">
            <h1>Address: 18061 Kirk Ave, Tustin, CA 92780</h1>
            <h1>Phone Number:  (714) 287-6815 </h1>
          </div>

          <div class="footerThird">
            <span>Copyright 2020 Reliant Industrial Supply<span>
          </div>
      </div>
    </div>
  </body>
</html>

大家好！

如果您运行此代码，它在桌面上看起来不错且可用。 但是，一旦您减小视口宽度以模拟移动设备，该段落就会显得很乱。 我想要做的就是将文字放在图像下方，仅供移动设备使用。 我知道您只是应该将不同的 css 放在媒体查询上方，但我不知道如何继续这样做，因为我不知道如何让它忽略允许图像和文本内联的 css在移动端的桌面上。 谢谢你帮助我！

Answer 1

要在移动视口中隐藏段落，您可以在 css 中添加以下代码块-

 @media only screen and (max-width: 768px) {.left { display: none; } }

它基本上告诉浏览器，如果屏幕宽度在 0px - 768px（这是移动屏幕的典型宽度）之间，那么您不应该渲染 <p> 标签。 换句话说，所有屏幕宽度为 768px 或更小的设备，只需忽略 html 中的 < p > 标签，就像它根本不存在一样！

希望能帮助到你。 如果它不起作用或您需要任何澄清，请发表评论。

Answer 2

这是我的解决方案：

@media only screen and (max-width: 768px) {
  .clearfix {
    flex-flow: column;
  }
  .clearfix > div {
    order: 1;
  }
  .clearfix > div:first-child {
    order: 2;
  }
}

如何在手机的图像下制作文字 go？

问题描述

2 个解决方案

解决方案1
1 2020-07-18 16:18:13

解决方案2
1 已采纳 2020-07-19 04:28:31

如何在手机的图像下制作文字 go？

问题描述

2 个解决方案

解决方案1 1 2020-07-18 16:18:13

解决方案2 1 已采纳 2020-07-19 04:28:31

解决方案1
1 2020-07-18 16:18:13

解决方案2
1 已采纳 2020-07-19 04:28:31