CSSに非常に新しく、ブラウザのサイズが変わってゆがみが発生する

Question

私はHTMLとCSSに非常に新しいです。これは私がハハハハを支払っているため、私の親ビジネスのために作った最初のウェブサイトです。私はちょうどこのようなことをやりたいので、もう一度このようなことをする必要はありません:)

私はこれをどのように動作させるか分からないので、ここに問題があります。ブラウザのサイズが変更されます場合は、すべてがこのように「押しつぶされた」取得： Before Resize はその後 After Resize

今、再び、これはので、私の芸術/プログラミングを判断してはいけない、私はこれをやっている最初と最後の時間です。

{position:absolute; 
left: 50.5%; 
top: 115px; 
font-size: 40px; 
color:aliceblue; 
font-family:Courier New; 
width: 16%;} 


{Position:absolute; 
left: 15.6%; 
top: 300px; 
width: 84%;} 

は今、私はちょうど、固定ページをしたい：私は単に内の画像/テキストを入れて、のmain.cssに、私はほとんどすべてのために、以下のなかったHTML文書で 。私はパーセントの代わりにPixelsを使ってみましたが、私の1080pモニターではすばらしく見えましたが、720pの場合はそれほど大きくは見えませんでした。私は馬鹿を知っていますが、私を助けてください？

Answer 1

responsive designを使用する必要があります。そのためには、twitter bootstrapまたはcustom media queriesを使用できます。

Answer 2

このように、あなたのimgセレクタにheight: autoを追加してみてください：

img.logo { 
    position:absolute; 
    left: 15.6%; 
    top: 300px; 
    width: 84%; 
    height: auto; 
} 

しかし、あなたが本当にブートストラップのようなものを使用する必要がありますので、あなたはすぐに、コンテンツが異なる画面上で正しくレンダリングないでより多くの似たような状況を取得します - この意志をあなたの将来の多くの時間を節約してください。
ナビゲーションにはnavbar、ページタイトルにはハチミツの背景画像を使用してみてください。jumbotrone

Answer 3

異なる画面解像度で同じ画像を取得するのは難しいです。 さまざまな可能性があります。 Picture tag

またはこの完全なfree online course, Udacity responsive images

ベスト