2

クライアントからの幅が640pxのPSDファイルが1つだけあり、iOSから異なる画面デバイスのWindowsまで、すべてのデバイスで修正する必要があります。

私の問題は、小さいサイズのデバイスと大きいサイズのデバイスで異なる画像をトリミングしたくないということです。私はいくつかの解決策を探しましたが、ビューポート、メディアクエリを使用するすべてと混同しています。そして新しいiphone5は1136pxの解像度を持っています私はこのPSDで達成する方法がわかりません。すべてのデバイスで1つのサイズの画像をトリミングしたいのですが可能ですか

4

3 に答える 3

1

長い間解決策を探した後、使用できることがわかりました

<meta name="viewport" content="width=640">

他の作業はブラウザに任せてください。これはapple.comから見つけました。ソースを表示するだけhttp://www.apple.com

于 2012-09-28T19:46:36.797 に答える
0

ある種の「ハッキー」な方法がない限り、CSSを使用して「トリミング」することはできないと思います。

ただし、メディアクエリを使用すると、ブラウザに合わせてサイズを簡単に変更できます。

<script>
      <link rel="stylesheet" href="css/largeres.css" media="screen and (min-width: 1236px)" > 

      <link rel="stylesheet" href="css/mediumres.css" type="text/css" media="screen and (max-width: 720px)">

      <link rel="stylesheet" href="css/smallres.css" type="text/css" media="screen and (max-width: 360px)">
</script>

smallres.css

yourImage{
    height: 60%;
    width: 60%;

}

mediumres.css

yourImage{
    height: 80%;
    width: 80%;

}

largees.css

yourImage{
    height: 100%;
    width: 100%;

}

于 2012-09-13T15:14:39.867 に答える
0

背景画像として設定し、それを使用background-size: coverして引き延ばすことができます。詳細については、こちらを参照してください。デモはこちらを参照してください (ブラウザ ウィンドウのサイズを変更して、動作を確認してください)。

残念ながら、これは CSS3 プロパティ IE8 以下ではサポートされていないため、フィルターを使用してこれを克服するか (最初のリンクに詳細が記載されています)、JavaScript を含むより複雑なソリューションを使用することができます。

メディアクエリも可能な解決策ですが、私はそれらについてあまり知りません。(技術的に) 1000px を超える幅の画面を持つ新しいスマートフォンについて、あなたは良い点を指摘しています。

おそらくメディアの代わりにハンドヘルドを使用して、メディアクエリを使用する方法があると確信していますか? 完全にはわかりませんが、それをさらに探求したい場合は、Google があなたの味方になると確信しています。

于 2012-09-13T15:27:55.563 に答える