我在 Eloqua 上創(chuàng)建了一個(gè)電子郵件模板，所以我成功地做到了在移動(dòng)視圖上隱藏圖像。所以它只顯示在桌面視圖上?，F(xiàn)在我想做的是僅在移動(dòng)視圖上而不是在桌面視圖上查看另一個(gè)圖像。我怎樣才能做到這一點(diǎn)？請(qǐng)看一下我的代碼@media (max-width: 480px) {.size-controller { width: 100%;}.mobile-16px-font { font-size: 16px !important;}.mobile-hide { display: none !important;}.mobile-show { }.mobile-100-percent { width: 100% !important;}}<br> <span style="font-size: 20px; color: #26478D;">April 30 Web event, 4.30-5.00pm</span> <img src="http://images.go.experian.com/EloquaImages/clients/ExperianInformationSolutionsInc/%7B2fd05069-3482-4a59-a8ee-b60f8b8c2c5e%7D_macbook-pro-3030365_300.jpg" width="250" align="right" class="mobile-hide" hspace="10"> <img src="http://images.go.experian.com/EloquaImages/clients/ExperianInformationSolutionsInc/%7B2fd05069-3482-4a59-a8ee-b60f8b8c2c5e%7D_macbook-pro-3030365_300.jpg" width="250" align="right" class="mobile-show" hspace="10"> <br><span style="font-size: 14px; color: rgb(87, 87, 85); border-style: none; padding-right: 10px; padding-bottom: 10px; padding-top: 10px;" class="mobile-16px-font"> We did have something a bit more elaborate than a web event planned for April, however we’re equally excited to see how we go! We’ll be holding it at 4.30pm (EST) on April the 30th. <br><br>我似乎無(wú)法僅在移動(dòng)視圖而非桌面視圖上顯示圖像
2 回答
守著一只汪
TA貢獻(xiàn)1872條經(jīng)驗(yàn) 獲得超4個(gè)贊
您將需要使用@media和max-width的組合min-width。
用于顯示或隱藏某個(gè)斷點(diǎn)上方的
min-width塊。在這個(gè)例子中我使用的是. 您可以根據(jù)您的要求進(jìn)行更改。480px用于
max-width顯示或隱藏?cái)帱c(diǎn)下方的塊。
全屏運(yùn)行該代碼片段并嘗試將下面的窗口大小調(diào)整為480px，您將看到結(jié)果。
@media screen and (max-width: 480px) {
.show-on-desktop {
display: none;
}
}
@media screen and (min-width: 481px) {
.hide-on-desktop {
display: none;
}
}
<div>
<div class="show-on-desktop hide-on-mobile">
<h1>This is for desktop</h1>
<img src="https://via.placeholder.com/350" alt="" />
</div>
<div class="show-on-mobile hide-on-desktop">
<h2>This is for mobile</h2>
<img src="https://via.placeholder.com/250" alt="" />
</div>
</div>
達(dá)令說(shuō)
TA貢獻(xiàn)1821條經(jīng)驗(yàn) 獲得超6個(gè)贊
您可以添加類(lèi)似的邏輯來(lái)隱藏.mobile-show圖像。max-width: 480px您可以使用僅在大于或等于 的視口上min-width: 480px應(yīng)用顯示，而不是使用。.mobile-hide480px
雖然與您的案例無(wú)關(guān)，但我對(duì)您的 CSS 和 HTML 感到擔(dān)憂。你不應(yīng)該!important粗心地使用。您應(yīng)該將文本節(jié)點(diǎn)包裝在 HTML 標(biāo)簽中，并且標(biāo)題應(yīng)該用標(biāo)題標(biāo)簽包裝（例如<h1>）。此外，就您而言，最好使用 CSS 類(lèi)而不是內(nèi)聯(lián)樣式。
@media (max-width: 480px) {
? .size-controller {
? ? width: 100%;
? }
? .mobile-16px-font {
? ? font-size: 16px !important;
? }
? .mobile-hide {
? ? display: none;
? }
? .mobile-100-percent {
? ? width: 100% !important;
? }
}
@media (min-width: 480px) {
? .mobile-hide {
? ? display: inline;
? }
? .mobile-show {
? ? display: none;
? }
}
<h1 style="font-size: 20px; color: #26478D;">April 30 Web event, 4.30-5.00pm</h1>
<p>
? <img src="http://images.go.experian.com/EloquaImages/clients/ExperianInformationSolutionsInc/%7B2fd05069-3482-4a59-a8ee-b60f8b8c2c5e%7D_macbook-pro-3030365_300.jpg" width="250" align="right" class="mobile-hide" hspace="10">
? <img src="http://images.go.experian.com/EloquaImages/clients/ExperianInformationSolutionsInc/%7B2fd05069-3482-4a59-a8ee-b60f8b8c2c5e%7D_macbook-pro-3030365_300.jpg" width="250" align="right" class="mobile-show" hspace="10">
? <span style="font-size: 14px; color: rgb(87, 87, 85); border-style: none; padding-right: 10px; padding-bottom: 10px; padding-top: 10px;" class="mobile-16px-font">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
? We did have something a bit more elaborate than a web event planned for April, however we’re equally excited to see how we go! We’ll be holding it at 4.30pm (EST) on April the 30th.<br>
? Tune in to hear more about how Experian has adjusted their way of doing business over the last couple of months, the latest features available in Aperture 2.0 and hear directly from a couple of our Advocates on how they have benefited from the Advocate program, and how they have adapted to the new norm.<br><br>
? We’ll run the event via a Webex, all you will need to do is grab a drink and click this link a few minutes before the time;? ?<a align="center" data-targettype="link" title="Link">Webex event – 30 April at 4.30pm</a></span>
</p>
- 2 回答
- 0 關(guān)注
- 183 瀏覽
添加回答
舉報(bào)
0/150
提交
取消