javascript - CSS-配置された要素のスケーリングrel。ブラウザのウィンドウサイズに

Question

CSSのみを使用してウィンドウサイズに対して'ed要素を正しくスケーリングする方法はありpositionますか、それともjavascript / jQにステップアップする必要がありますか？を使用してコンテナを追加し、それに応じてスケーリングしてみまし100% widthたheight。

.container{
    position: relative;
    width: 100%;
    height: 100%;}

.transblock{
    position:absolute; 
    width:44%; 
    height:5%; 
    top:90%; 
    left:0%; 
    background:green;
    opacity: 0.6;
    z-index:5; }

.h1text{
    position:absolute; 
    width:30%; 
    height:5%;
    top:90.75%; 
    left:13.5%; 
    z-index:10;
    color:white;}

http://jsfiddle.net/cyaXL/

段落とメニューのギャップが問題です。1280pの画面では小さすぎ、1920pでは大きすぎます。それをより良く調整する方法はありますか？

Answer 1

次のような「ビューポート」ユニットも使用できます。

div {
 width: 50vw; //means it should take 50% of the window size
}

Answer 2

左が25％の.menu4があるという事実が、ここでの問題だと思います。

.menu4 {
  left: 25%;
}

より良い：

.menu4 {
  left: 0%;
  width:auto;
  margin-right:1%;
}

.menu4 ul {
  float:right;
  clear:both;
}

Answer 3

これは、スクリプトではなくcssを介して実行する必要があります。はい、正しく実行しています。コンテナーをウィンドウサイズの100％にしてから、そのコンテナーにアイテムを配置します。

Answer 4

ピクセル単位のフォントサイズを使用しています。「em」で試してみてください。％を使用してレイアウトを行う場合、「px」の代わりに「em」を使用する必要があります。変換表を参照して試してください。