ウェブサイトをデザインする際の主な問題の 1 つは、さまざまな画面解像度です。まず、1366 x 768 のコンピューターでデザインすると、完璧に見えます! 次に、27インチのMacでは、高さがコンテンツで使用できるほどのスペースがあります。画面の解像度が小さいほど、幅を気にする必要があり、大きくなると、高さを気にする必要があります。画面の解像度とスペースを解決するための根本的な要因は何ですか?パーセンテージ、個別のメディア スタイル シート、およびレスポンシブが取引を行うと聞いたことがありますが、それらは本当に問題を解決しますか?それは他の設計上の競合を引き起こしますか?
よくわかりませんが、次の場所で変更を加える必要があると思います。
section > div{
font-weight:bold;
font-size:30px;
color:#000000;
display:inline; /*fixed size based only what is in the element*/
width:30%; /*restrict the width size, default with inline property is 100%*/
/*max-height:85%;*/ /*restrict height size*/
padding:5px; /*a little pad from the edges are good*/
margin-top:10px; /*align the same as the other elements*/
margin-bottom:100px;
margin-left:100px;
margin-right:100px;
}
#message{ /*move element freely inside section; placed where desired*/
position: absolute;
top:120px;
left:-75px;
right:100px;
min-height:310px; /*same height across all content pages*/
min-width:550px; /*same width across all content pages*/
font-size:20px;
}
念のため、jsfiddle の私の完全な CSS コード: JS Fiddle
私は自分のウェブサイトでほとんどのターゲット ユーザーにリーチしたいと考えていますが、現時点では 1024 x 768 と一部のタブレットにのみ適していますが、モバイル デバイスや大きなコンピューター画面には適していません。
私のウェブサイト:スマートフォン写真のウェブサイト プロジェクト
コンテンツが背景画像とどのように整列しているかがわかります。カメラは右側にあり、コンテンツは左側にあり、モバイル デバイスのように背景のカメラ部分に触れたり、近づいたりすることはありません。もう 1 つの問題は、大型のコンピューター画面では、コンテンツの上部と下部にスペースがありすぎて、固定された高さの中央にあるように見えます。画面の高さが大きくなるにつれて、コンテンツの垂直スクロール ボタンを少なくし、1024 x 768 で表示されるように必要なスペースを埋める必要があります。
この問題への回答と、すべてのメディアで画面解像度を解決する方法についての将来の参照に使用できるものを本当に感謝しています. この Web サイトは、複数の画面解像度をテストするのに最適です。ViewLike.US