0

レスポンシブ Web デザインに手​​を出しているだけです。デスクトップだけでなくモバイル デバイスでも機能するように、既存のサイトを変更しようとしています。http://2012.inspireconf.com/など、インターネット上のいくつかの例を確認してきました。

私の質問はこれです-画像に関しては...さまざまなブラウザーサイズに合わせてスケーリングする適切な方法は何ですか? CSSで次のテストを試しました： 

 @media only screen and (max-width: 980px) {        
.hero-unit {
  background: url("../img/1.jpg") 100% no-repeat;
  height: 7em;
  width: 14em;    
  padding: 0.5em;
  margin-bottom: 2em;
  background-color: #eeeeee;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}   
 }

 @media only screen  and (min-width: 981px) and (max-width: 1081px) {   
.hero-unit {
  background: url("../img/2.jpg") 100% no-repeat;
  height: 7em;
  width: 14em;    
  padding: 0.5em;
  margin-bottom: 2em;
  background-color: #eeeeee;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}   
 }

 @media only screen  and (min-width: 1082px) and (max-width: 1181px) {  
.hero-unit {
  background: url("../img/3.jpg") 100% no-repeat;
  height: 7em;
  width: 14em;    
  padding: 0.5em;
  margin-bottom: 2em;
  background-color: #eeeeee;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}   
 }

 @media only screen  and (min-width: 1182px) and (max-width: 1281px) {  
.hero-unit {
  background: url("../img/4.jpg") 100% no-repeat;
  height: 7em;
  width: 14em;    
  padding: 0.5em;
  margin-bottom: 2em;
  background-color: #eeeeee;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}   
 }

画像ファイルは、1 から 4 までのさまざまな番号の単純な画像です。これは、どの画像ファイルがロードされているかを視覚的に確認するためのものでした。デスクトップでブラウザのサイズを変更すると、メディア クエリが機能していることがわかります...さまざまな画像が読み込まれています。

しかし、実際のサイトでこれを行うとしたら、同じ画像の 5 つの異なるバージョンを作成する必要があることに気付きました。

これを行う「適切な」方法は、1つの大規模な画像/画像を作成し、それを縮小する方法ですか? つまり、CSS は次のようになります。

 @media only screen and (max-width: 980px) {        
.hero-unit {
  background: url("../img/1.jpg") 40% no-repeat;
  height: 7em;
  width: 14em;    
  padding: 0.5em;
  margin-bottom: 2em;
  background-color: #eeeeee;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}   
 }

 @media only screen  and (min-width: 981px) and (max-width: 1081px) {   
.hero-unit {
  background: url("../img/1.jpg") 60% no-repeat;
  height: 7em;
  width: 14em;    
  padding: 0.5em;
  margin-bottom: 2em;
  background-color: #eeeeee;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}   
 }

 @media only screen  and (min-width: 1082px) and (max-width: 1181px) {  
.hero-unit {
  background: url("../img/1.jpg") 80% no-repeat;
  height: 7em;
  width: 14em;    
  padding: 0.5em;
  margin-bottom: 2em;
  background-color: #eeeeee;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}   
 }

 @media only screen  and (min-width: 1182px) and (max-width: 1281px) {  
.hero-unit {
  background: url("../img/1.jpg") 100% no-repeat;
  height: 7em;
  width: 14em;    
  padding: 0.5em;
  margin-bottom: 2em;
  background-color: #eeeeee;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}   
 }

これを試してみましたが、画像が拡大縮小されていないように見えましたが、そもそも画像を適切に作成しなかったためかどうかはわかりません。(私はグラフィック デザイナーではありません)。

ありがとう！

4

1 に答える 1

1

解決策1：CSSメディアクエリ

より小さな解像度に一致するデバイスの帯域幅を気にしない場合は、このソリューションで作業できます。

すべてのメディアクエリに対して同じcssプロパティをオーバーライドする必要はありません。ボーダー、マージン、パディングなどを一度設定する.hero-unitと、すべてのメディアクエリがそれを継承します。

background-sizeプロパティには、containキーワードがあります。コンテナに収まるように画像を拡大縮小します。背景画像は比例してサイズ変更されます。

含む：

このキーワードは、両方の寸法が背景のポジショニング領域の対応する寸法以下になるようにしながら、背景画像をできるだけ大きく拡大縮小する必要があることを指定します。

扱っている画像の種類によっては、 background-sizeプロパティのcoverキーワードを試してみることもできます。

カバー：

このキーワードは、両方の寸法が背景のポジショニング領域の対応する寸法以上であることを確認しながら、背景画像をできるだけ小さく拡大縮小する必要があることを指定します。

例：

background-size: contain;

また、ここで実用的なデモを設定しますhttp://jsfiddle.net/qBuzR/5/

解決策2：Javascriptとサーバー側のサイズ変更（セルフホスト）

帯域幅が気になる場合は、クライアントが要求する解像度に応じて、サーバー側で写真のサイズを変更する必要があります。

サーバー側のPHPで非常にうまく機能するAdaptiveImagesというライブラリがあります。必要な言語のライブラリを見つけることができると思います。

解決策3：Javascriptとサーバー側のサイズ変更（サードパーティ）

セットアップが面倒な場合は、 mobify.comAPIなどのサードパーティサービスを試すことができます。言い換えれば、私はそれをサービスとしてのサイズ変更と呼びます。

例：

http://ir0.mobify.com/jpg80/100/100/http://farm4.staticflickr.com/3113/3831295511_2c004d9059_o.jpg

このAPI呼び出しは、画像を最大高さと幅100pxで品質レベル80％の画像形式JPGに変換します。

于 2012-11-08T20:39:56.627 に答える