如何使用自定義圖像/圖標與溫泉UI

我使用Onsen-UI框架和AngularJS開發移動應用程序。我想爲按鈕使用一些自定義圖像，但是當我在某些手機上打開應用程序時，它們會顯得模糊或不明確。如何使用自定義圖像/圖標與溫泉UI

這裏是我的代碼（我使用傳送帶內的圖像）：

<ons-carousel swipeable initial-index="0" auto-scroll> 
    <ons-carousel-item class="list-action-item"> 
    <!-- item title --> 
    </ons-carousel-item> 

    <ons-carousel-item class="list-action-menu"> 
    <!-- item action menu --> 
    <img src="../images/my_custom_image.png"> 
    </ons-carousel-item> 
</ons-carousel>

根據溫泉documentation我可以使用圖標，specifing哪些圖標引擎使用（Ionicons或字體 - 真棒），如這個：

<ons-carousel-item class="list-action-menu"> 
    <!-- item action menu --> 
    <ons-icon icon="fa-angle-left" size="40px"></ons-icon> 
    </ons-carousel-item>

但在這種情況下，我無法設置自定義圖像。

在過去，我使用Eclipse開發了一些Android應用程序，並且我有不同的文件夾來處理不同的屏幕分辨率。我的意思是這樣的：

所以，用溫泉怎麼做？

來源

2016-04-21 smartmouse

Well溫泉用戶界面使用字體的圖標。所以如果你想讓所有的東西都能正常工作，溫泉用戶界面期望你需要一個自定義字體並使用它。但創建一個可能不是微不足道的，所以我期待你只是想在服務器上擁有一個自定義映像作爲單獨的文件。

從技術上講，使用字體更具有高性能，因爲您可以將數百個圖標存儲在字體中，以便瀏覽器只對所有圖標發出一次請求，而不是每個圖標發出一次請求。它也更有效地存儲圖標。但是，讓我們把性能優化放在一邊（如果你感興趣，你也可以檢查css sprites和base64） - 那不是你的問題，但仍然是與問題有關的東西，所以我想我可能會提及它。

現在的答案：

因爲你很可能不會使用的字體你可以定義自己的類，並具有不同的屏幕尺寸不同的背景圖像和尺寸。

.my-custom-icon { 
    font-size: 40px; 
    height: 1em; 
    background: url('https://onsen.io/images/common/docs-guide-icon.png') center no-repeat; 
} 


@media only screen and (max-width: 300px) { 
    .my-custom-icon { 
    font-size: 30px; 
    background-image: url('https://onsen.io/images/common/docs-css-components-icon.png'); 
    } 
}

Demo

這僅僅是一個例子，但它表明你如何輕鬆地使用不同的圖像用於不同的屏幕。

你甚至可以定義在不同的文件不同的屏幕的樣式，他們會在需要的時候再次只用：

<link rel="stylesheet" media="(max-width: 300px)" href="small.css" />

來源

2016-04-22 06:06:58

如何使用自定義圖像/圖標與溫泉UI

回答

相關問題