在 div 元素中插入 @media 规则

Inserting @media rule in a div element

我在这里和编码方面都很新,谢谢邀请我。

我在 magento 2.4 页面顶部创建了一个块和一个小部件以显示为横幅促销,但我希望桌面和移动设备的显示不同。

我尝试过的:

@media (max-width: 480px) {
body {<div style="padding: 14px; text-align: center;  background-image: url('https://s1.gifyu.com/images/nivea.gif'); background-image: center center; background-image: cover; background-image: no-repeat; background-image: fixed; color: #fff; font-weight: bold; font-size: 20px; border-top: 3px solid #f28d49;">Children's Day Sale. Get 5% OFF for <a style="color: #fff; text-decoration: underline;" href="https://tucsons.ng/index.php/fashion/children.html">ALL Children's wears</a>. Shop Now! <span style="text-decoration: underline;">Children's Day 2021</span></div>
}}
@media (min-width: 481px) and (max-width: 1024px) {
body {<div style="padding: 14px; text-align: center; background-image: url('https://s1.gifyu.com/images/nivea.gif'); background-image: center center; background-image: cover; background-image: no-repeat; background-image: fixed; color: #fff; font-weight: bold; font-size: 20px; border-top: 3px solid #f28d49;">Children's Day Sale. Get 5% OFF for <a style="color: #fff; text-decoration: underline;" href="https://tucsons.ng/index.php/fashion/children.html">ALL Children's wears</a>. Shop Now! <span style="text-decoration: underline;">Children's Day 2021</span></div>
}}
@media (min-width: 1025px) {
body {<div style="padding: 14px; text-align: center;  background-image: url('https://s1.gifyu.com/images/desktop.gif'); background-image: center center; background-image: cover; background-image: no-repeat; background-image: fixed; color: #fff; font-weight: bold; font-size: 20px; border-top: 3px solid #f28d49;">Children's Day Sale. Get 5% OFF for <a style="color: #fff; text-decoration: underline;" href="https://tucsons.ng/index.php/fashion/children.html">ALL Children's wears</a>. Shop Now! <span style="text-decoration: underline;">Children's Day 2021</span></div> }}

只出现了三次

我的网站=tucsons.ng

虽然您没有足够的调试信息并且应该关闭这个问题,但我查看了您的站点,您应该可以将其粘贴到您的小部件中:

<style>
.banner {
  padding: 14px;
  text-align: center;
  background-image: url('https://s1.gifyu.com/images/nivea.gif');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  border-top: 3px solid #f28d49;
}

.banner a {
  color: #fff;
  text-decoration: underline;
}

.banner span {
  text-decoration: underline;
}

@media (min-width: 1025px) {
  .banner {
    background-image: url('https://s1.gifyu.com/images/desktop.gif');
  }
}
</style>

<div class="banner">Children's Day Sale. Get 5% OFF for <a href="https://tucsons.ng/index.php/fashion/children.html ">ALL Children's wears</a>. Shop Now! <span>Children's Day 2021</span></div>

您不需要将 HTML 粘贴三遍。我在你的 div 中添加了一个 class .banner 这样我们就可以使用 CSS 来定位它。

此外,在 1025px 之前似乎没有任何变化,所以我只设置 background-image 进行更改。