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