2016-08-11 12 views
0

iOSとAndroidの両方でCordovaアプリを構築していますので、当然多くの画面サイズがあります。コルドーバで大きな画像を背景に使用するか、複数の画像を使用しますか?

一部の私のビューには完全な背景イメージがあります。私の質問は:

最大の潜在的なデバイスをカバーし、それをすべてのデバイスに使用する1つの大きなイメージを使用する方が良いですか、メディアクエリを使用してそれぞれを正しいデバイスに割り当てる多くの異なるイメージを使用しますか?

ここでベストプラクティスを探してください。

答えて

1

、割合、またはviewportバックグラウンドCSSサイズを組み合わせた2732 x 2048(今日は最大iPad screen size)のイメージを使用することをおすすめします。たとえば、次のように

      http://play.ionic.io/app/094f73be9047

CSS

ion-content { 
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/6/6c/Keeny-creek-wv-autumn-waterfall-scenery_-_West_Virginia_-_ForestWander.jpg); 
    background-size: cover; 

    text-align: center; 
} 

ion-content p { 
    padding: 20px 0; 
    color: white; 
    font-weight: 100; 
    font-size: xx-large; 
} 

HTML

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    <link href="https://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet"> 
    <script src="https://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script> 
    </head> 
    <body ng-app="app"> 
    <ion-pane> 
     <ion-header-bar class="bar-positive" class="bar-stable"> 
     <h1 class="title">Awesome App</h1> 
     </ion-header-bar> 

     <ion-content class="padding"> 
     <p>I am so beautiful</p> 
     <button class="button button-positive">I'm a button</button> 
     </ion-content> 

    </ion-pane> 
    </body> 
</html> 
0

パターンとしてそのイメージを使用する方法がありますか。そうすることで、さまざまな画面サイズで問題が発生することはありません。

関連する問題