我在 Eloqua 上創(chuàng)建了一個電子郵件模板，所以我成功地做到了在移動視圖上隱藏圖像。所以它只顯示在桌面視圖上?，F(xiàn)在我想做的是僅在移動視圖上而不是在桌面視圖上查看另一個圖像。我怎樣才能做到這一點？請看一下我的代碼@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>我似乎無法僅在移動視圖而非桌面視圖上顯示圖像
2 回答
守著一只汪
TA貢獻(xiàn)1872條經(jīng)驗 獲得超4個贊
您將需要使用@media和max-width的組合min-width。
用于顯示或隱藏某個斷點上方的
min-width塊。在這個例子中我使用的是. 您可以根據(jù)您的要求進行更改。480px用于
max-width顯示或隱藏斷點下方的塊。
全屏運行該代碼片段并嘗試將下面的窗口大小調(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á)令說
TA貢獻(xiàn)1821條經(jīng)驗 獲得超6個贊
您可以添加類似的邏輯來隱藏.mobile-show圖像。max-width: 480px您可以使用僅在大于或等于 的視口上min-width: 480px應(yīng)用顯示，而不是使用。.mobile-hide480px
雖然與您的案例無關(guān)，但我對您的 CSS 和 HTML 感到擔(dān)憂。你不應(yīng)該!important粗心地使用。您應(yīng)該將文本節(jié)點包裝在 HTML 標(biāo)簽中，并且標(biāo)題應(yīng)該用標(biāo)題標(biāo)簽包裝（例如<h1>）。此外，就您而言，最好使用 CSS 類而不是內(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)注
- 226 瀏覽
添加回答
舉報
0/150
提交
取消