どのように私のウェブサイトをより大きくより小さい画面サイズに合わせて設定するのですか？

Question

誰かが問題を助けることができたら、私は複数の画面サイズに合わせて自分のウェブサイトを手に入れようとしていますか？私はいくつかの研究を行い、さまざまな方法（「adjust-your-website-to-fit-all-resolutions」や「html-css-to-fit-all-screen-resolution」など）を試みてきており、さまざまなCSSコードとJavascriptコードを試してみました。私も<meta name="viewport" content="width=device-width">のようなHTMLコードと@media screen and (min-width: 700px)の私のメインのCSSファイルのような異なるレスポンシブなウェブサイトのコードを試してみてください。なぜそれが動作していないのかわかりません。

私が疑問に思っているもう一つのことは、私の既存のhtmlとcssコードである可能性があります。あなたは私のさまざまな画像、ヘッダー、コンテンツなどを参照して、私はposition:absolute;を使用していましたが、私はすべての画面サイズにも影響を与えるかどうか疑問に思っています。また、私の問題を引き起こしているのかもしれないと思っていたもう一つのことは、当時の自分のコンピュータの画面に基づいて自分のサイトをデザインする方法です。 1366 x 768（解像度スクリーンサイズ）のコンピュータを使用していたサイトを最初にデザインしたときに、私のサイトで初めて問題が発生したときに、1600 x 900（解像度スクリーンサイズ）。 position:absolute;が私のウェブサイトの能力を傷つけて、別の画面サイズに適応できないのかどうか疑問です。

CSS、HTML、またはJavaScriptを使用して、私のウェブサイトをより大きなサイズまたは異なるサイズに調整する方法はありますか？

ありがとうございます！

P. - ここに私のウェブサイトからのコードのいくつかの例：

コード@media画面と私は私のhtmlに入れ

#wel { 
    position:absolute; 
    top: 108px; 
    left: 278px; 
} 
@media screen and (min-width: 700px) { 
    #wel { 
     position:absolute; 
     top: 108px; 
     left: 250px; 
    } 
} 
@media screen and (min-width: 1600px) { 
    #wel { 
     position:absolute; 
     top: 108px; 
     left: 400px; 
    } 
} 

コード：（最小幅：1600px）//コンピュータが私のCSSファイルから1600 X900のサイズ

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 

誰もが何か提案を持っている：応答コードの作品を​​作るには？

Answer 1

同じdiv id（#wel）の2つの異なるmin-widthメディアクエリを定義しているため、動作していないため、ご使用の要件に応じて&アップデートを試してください。例では、ここで

#wel { 
    position:absolute; 
    top: 108px; 
    left: 278px; 
} 
@media screen and (min-width: 700px) { 
    #wel { 
     position:absolute; 
     top: 108px; 
     left: 250px; 
    } 
} 
@media screen and (min-width:701px) and (max-width: 1600px) { 
    #wel { 
     position:absolute; 
     top: 108px; 
     left: 400px; 
    } 
} 

、幅700pxまで、それはのように定義された第一のメディアクエリを呼び出します（最小幅：700px）とそれが701-からのように定義されたメディアクエリを呼び出しますfrom701-1600 1600。

Answer 2

あなたのレイアウトがどのようになっているかはわかりませんが、実際には@media画面とメタビューポートを使用して、相対的なサイズと位置を使用しようとしています。