在 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
进行更改。
我在这里和编码方面都很新,谢谢邀请我。
我在 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
进行更改。