3

私のサイトが工事中であることを知らせるために画像を入れました。デスクトップでアクセスしたときに元のサイズを維持する 800x600 の画像です。ページにあるのはこれだけです。

携帯電話からアクセスしたときに画面全体に収まるようにしたい。どのように？

<style type="text/css">
    body { background-color: #6BC5C5; }
</style>
<title>Size is being moved to another server</title>
<div style="margin: 0; padding: 0; left: 0; top: 0; border: 0; position: absolute;">
<img src="movedatacenter.jpg" alt="Under Maintenance" width="595" height="1021" align="left"></div>
4

3 に答える 3

9

使用したいのはメディアクエリです。メディア クエリを使用すると、画面サイズに基づいてさまざまな CSS ルールを適用できます。

例えば：

@media only screen and (max-width: 600px) {

    img#underconstruction {width: 100%; height: 100%; margin: 0; padding; 0;}
}

これにより、デバイスの画面が 600px 以下の場合、underconstruction の ID を持つ img が幅と高さいっぱいになるように強制されます。新しいiPhoneの高さは480よりも大きいため、600が適切なサイズです.

さらに、次のメタ タグを使用して、モバイル デバイスでビュー ポートを強制的に 1:1 の比率にする必要があります。

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
于 2013-02-15T14:21:45.710 に答える
2

次のように画像のスタイルを設定します。

width: 100%;
height: 100%;
max-width: 800px;
max-height: 600px;

これにより、イメージのサイズが親に最大 800x600 まで拡張されます。親要素もウィンドウの幅であることを確認してください。

于 2013-02-15T14:22:52.847 に答える
2

これにはCSSメディアクエリを使用できます

@media all and (max-width: 768px) {
/* 768px is usually the width of tablets in portrait orientation */
/* You can use any other size you see fit */

    img {width: 100%;}
}

これにより、幅が指定された 未満の場合にのみスタイル情報が適用されますmax-width。

于 2013-02-15T14:23:10.313 に答える