2016-11-14 1 views
0

以下のコードプレビューのように、パーセントではなくピクセルで完全なサイズのサイトを作成しました。pxで固定されているサイト全体のサイズを調整しますか?

しかし、解像度が低い画面では、サイトをうまく見ることができませんでした。ユーザーはブラウザでズームアウトしてサイトを正しく表示する必要があります。

問題を簡単に解決する方法はありますか? など、ブラウザのズームなどのためのメディアクエリの作成など?

.fixed1, .fixed2, .fixed3{ 
 
    margin:0 auto; 
 
} 
 

 
.fixed1{ 
 
width:400px; 
 
height:400px; 
 
background-color:green; 
 
} 
 

 
.fixed2{ 
 
width:300px; 
 
height:300px; 
 
background-color:red; 
 
} 
 

 
.fixed3{ 
 
width:200px; 
 
height:200px; 
 
background-color:blue; 
 
}
<div class="fixed1"> 
 
    <div class="fixed2"> 
 
    <div class="fixed3"> 
 
    </div> 
 
    </div> 
 
</div>

答えて

0

私は400

よりも小さな画面サイズを持っているモバイルデバイスでそれをテストしている

<head> 
    <!--other tags...--> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
</head> 

内部のヘッドタグビューポートメタタグを追加

+0

ですが、ビューポートはモバイルデバイス、そうではありませんか? さらに解像度の低いPCでも必要です。 – KeBom

+0

モバイルデバイスだけでなく、すべてのデバイスで動作するplsは、結果を確認するために実際のデバイスを試します –

+0

私はそれを試しましたが、それは私の目標を保存しませんでした。 問題は、ページの高さが常に同じで、スクロールバーが表示されないことです。 – KeBom

関連する問題