媒体查询不适用于 MJML 电子邮件框架

Question

我对 MJML 框架非常陌生，到目前为止我很喜欢它，但我遇到一个问题，每当我将屏幕切换到移动设备时。 “我们最新的博客”部分被剪辑到其上方的“我们的客户在说什么”部分。此外，当我将屏幕更改为移动设备时，我的 Pulse 徽标不会对齐到中心。

<mjml>
  <mj-head>
    <mj-style inline="inline">
      @import url('https://fonts.googleapis.com/css2?family=MonteCarlo&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
      * { 
        box-sizing: border-box; 
        font-family: "Poppins", sans-serif; 
      }
      .color-text { 
        color: purple; 
      } 
      .inline-text { 
        display: inline-block;
        margin-right: 12px; 
      }

      .jumbo {
        background-image: url("http://127.0.0.1:5502/assets/employee2.png" );
        background-size: 600px;
        height: 400px;
      }

      .script-text {
        font-family: "MonteCarlo", cursive;
        font-weight: 400;
        font-style: normal;
      }

      .customer-review {
        background-image: url("http://127.0.0.1:5502/assets/employee2.png" );
        background-size: 600px;
        height: 400px;
      } 

      @media only screen and (max-width: 480px) {
        .mj-section-padding-fix div {
          padding-top: 300px !important; /* Adjust as needed */
        }
        .logo-text {
          text-align: center !important;
        }
      }
    </mj-style>
  </mj-head>
  <mj-body background-color="lightgrey">
    <mj-wrapper background-color="#fff" padding="0">
      <mj-section background-color="black" padding="5px">
        <mj-column>
          <mj-text color="white" padding="13px 55px">
            1800-00-1234 | [email protected]
          </mj-text>
        </mj-column>
      </mj-section>
      <mj-section background-color="#fff">
        <mj-column>
          <mj-text
            font-size="40px"
            font-weight="500"
            padding="0 40px"
            align="left"
            css-class="logo-text"
          >
            Pulse
          </mj-text>
        </mj-column>
        <mj-column padding="0">
          <mj-text
            font-size="16px"
            padding="18px 0 0"
            font-weight="600"
            align="center"
            color="#2B2B2B"
          >
            <span class="inline-text">Home</span>
            <span class="inline-text">About</span>
            <span class="inline-text">Blog</span>
            <span class="inline-text">Contact</span>
          </mj-text>
        </mj-column>
      </mj-section>
      <mj-section padding="0" css-class="jumbo">
        <mj-column>
        <mj-text font-size="50px" color="#ffffff" padding-top="80px" font-weight="700">
            Boost Your Business by Our Company
        </mj-text>
        <mj-text line-height="20px" font-size="15px" color="#ffffff" padding-right="100px">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
            lacinia odio
          </mj-text>
          <mj-button align="left" border-radius="30px" font-size="15px">
            Learn More
          </mj-button>
          <!-- <mj-image
            alt="employee"
            src="http://127.0.0.1:5502/assets/employee.png"
            padding="0"
          /> -->
        </mj-column>
      </mj-section>
      <mj-section padding="40px 30px 20px 50px">
        <mj-column>
          <mj-text font-size="14px" font-weight="600" align="center">Article Title</mj-text>
          <mj-divider border-width="2px" border-style="solid" border-color="lightgrey" padding="0 20px"/>
          <mj-image src="http://127.0.0.1:5502/assets/businessmeet.jpg" padding="10px"/>
          <mj-text line-height="20px" font-size="12px" color="#929292">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
            lacinia odio
          </mj-text>
        </mj-column>
        <mj-column>
          <mj-text font-size="14px" font-weight="600" align="center">Article Title</mj-text>
          <mj-divider border-width="2px" border-style="solid" border-color="lightgrey" padding="0 20px"/>
          <mj-image src="http://127.0.0.1:5502/assets/businessmeet.jpg" padding="10px"/>
          <mj-text line-height="20px" font-size="12px" color="#929292">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
            lacinia odio
          </mj-text>
        </mj-column>
        <mj-column>
          <mj-text font-size="14px" font-weight="600" align="center">Article Title</mj-text>
          <mj-divider border-width="2px" border-style="solid" border-color="lightgrey" padding="0 20px"/>
          <mj-image src="http://127.0.0.1:5502/assets/businessmeet.jpg" padding="10px"/>
          <mj-text
            line-height="20px"
            font-size="12px"
            color="#929292"
            align="left"
          >
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
            lacinia odio
          </mj-text>
        </mj-column>
      </mj-section>
      <mj-section padding="40px 25px 20px 25px">
        <mj-column>
          <mj-text
            font-size="35px"
            align="center"
            font-weight="bold"
            color="#2B2B2B"
          >
            Our Products are World Renown
          </mj-text>
          <mj-text align="center" color="#929292" font-size="14px">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </mj-text>
        </mj-column>
      </mj-section>
      <mj-section padding="10px 20px 30px 20px">
        <mj-column>
          <mj-image src="http://127.0.0.1:5502/assets/pexels, businesswomen.jpg" />
        </mj-column>
        <mj-column>
          <mj-text
            align="left"
            color="#2B2B2B"
            font-size="25px"
            font-weight="600"
            padding-top="60px"
            line-height="35px"
          >
            We Provide Quality Services
          </mj-text>
          <mj-text align="left" color="#929292" font-size="16px" line-height="25px">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
            eiusmod tempor incididunt 
          </mj-text>
          <mj-text font-size="20px" font-weight="600">
            Michael Clark
          </mj-text>
          <mj-text font-size="14px" color="#929292">
           Founder - Digital Agency
          </mj-text>
          <mj-text css-class="script-text" font-size="14px" color="#929292" >
           <span css-class="script-text">Michael Clark</span>
          </mj-text>
        </mj-column>
      </mj-section>

      <mj-section background-color="#F4F4F4">
            <mj-column>
                <mj-text align="center" font-size="25px" font-weight="600" color="#2B2B2B">Our Products</mj-text>
            </mj-column>
      </mj-section> 
      <mj-section background-color="#F4F4F4">
            <mj-column>
                <mj-image src="http://127.0.0.1:5502/assets/watchimage.jpg"/>
            </mj-column>
            <mj-column>
                <mj-text>
                    
                </mj-text>
            </mj-column>

      </mj-section>
      <mj-section background-color="#272727" padding-top="60px" css-class="customer-review">
            <mj-column>
                <mj-text align="center" font-size="35px" font-weight="600" color="#ffffff" padding="0 0 20px">What Our Customers Say</mj-text>
                <mj-button font-size="15px" border-radius="25px">
                    Read the Reviews
                </mj-button>
                <mj-text align="center" font-size="15px"  color="#ffffff" padding="20px 100px 20px 100px" line-height="25px" font-style="italic">
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
                eiusmod tempor incididunt.consectetur adipiscing elit. Sed do
                eiusmod tempor incididunt"
                </mj-text>
                <mj-text align="center" font-size="15px" color="#ffffff" padding="0">
                    - John Doe                
                </mj-text>
                <mj-text align="center" font-size="15px"  color="#ffffff" padding="40px 100px 20px 100px" line-height="25px" font-style="italic">
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
                eiusmod tempor incididunt.consectetur adipiscing elit. Sed do
                eiusmod tempor incididunt"
                </mj-text>
                <mj-text align="center" font-size="15px" color="#ffffff" padding="0 0 10px">
                    - John Doe                
                </mj-text>
            </mj-column>
      </mj-section>
     <mj-section padding="130px 0 30px 0" css-class="mj-section-padding-fix">
        <mj-column>
            <mj-text align="center" font-size="35px" font-weight="600" color="#2B2B2B">Our Latest Blog</mj-text>
            <mj-text align="center" font-size="14px"padding="20px 100px 10px 100px" line-height="25px" color="#929292">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
                     eiusmod tempor incididunt
            </mj-text>
        </mj-column>
     </mj-section>
     <mj-section padding="0" >
        <mj-group>
            <mj-column>
                <mj-image src="http://127.0.0.1:5502/assets/casualmeet.jpg" />
                <mj-text align="left" font-size="15px" font-weight="600">New Marketing Strategies</mj-text>
                <mj-text line-height="22px">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </mj-text>
            </mj-column>
            <mj-column>
            <mj-image src="http://127.0.0.1:5502/assets/casualmeet.jpg" />
                <mj-text align="center">fffffff</mj-text>
            </mj-column>
        </mj-group>
     </mj-section>
    </mj-wrapper>
  </mj-body>
</mjml>

我不太确定这里发生了什么，为什么我的媒体查询不适用。关于如何使用 MJML 使响应式 css 查询正常工作有什么想法吗？

Answer 1

这是经过修复的更新代码：https://mjml.io/try-it-live/AP4PeW3l1D

我建议您阅读MJML 文档。 MJML 将您的样式映射到各种 HTML 标记，因此在应用媒体查询时，请务必检查生成的 HTML 代码，以确定应用实际的类和样式的位置。