CSSブラウザのウィンドウが垂直方向に拡大縮小されたときのサイズ変更

Question

私は単純なログインページを作成しようとしていますが、しばらく前にCSS3 flexboxについて学んだ後、この新しいコンセプトを使用してページを再表示します。だから今、私のページは次のようになります。

私が欲しかったもの...私は、ブラウザのサイズを変更しようとしたまでです。 （私は単に幅低下させることなく、ブラウザのウィンドウの高さを減少させた場合）次に、私はこれを得た：

をこの（私は高さと最小のブラウザウィンドウの幅の両方を減少させた場合）：

これは私が応答Webデザインを作成するには、まだメディアクエリを持っている必要はありません、他のstackoverflowの答えに読んで以来、（私は後で、するつもりん）私を混同したが、パーセンテージの点で最大幅を指定するだけでCSSを作成できます。

ここに私のコードです：

HTML：

<div class="center"> 
    <!-- Logo --> 
    <img id="logo" src="assets/logowshadow.png" alt="cueclick logo"> 

    <!-- Login element --> 
    <form class="login" action="/action_page.js" method="post"> 
     <p>Enter <i>your</i> secret key</p> 
     <div id="password"> 
      <img id ="eye" src="assets/eye2.png" alt="eye"> 
      <input type="password" name="secret-key" placeholder="ilovecueclick" autofocus autocomplete="off"/> 
     </div> 
    </form> 
</div> 

CSS：

/* -- Background image -- */ 
body { 
    background-image: url(assets/wood.png); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-attachment: fixed; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    height: 100vh; 
} 

/* -- Center element -- */ 
.center { 
    max-width: 60%; 
    max-height: 80%; 
    width: 30%; 
    height: 40%; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    background-color: rgba(255, 255, 255, 0.7); 
    border-radius: 15%; 
    box-shadow: 2px 2px 4px 3px #505050; 
    position: absolute; 
    z-index: 1; 
} 

/* -- Logo style -- */ 
#logo { 
    position: relative; 
    z-index: 2; 
    max-width: 100%; 
    height: auto; 
} 

/* -- Form styles -- */ 
form.login { 
    max-width: 100%; 
    height: auto; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    position: relative; 
    z-index: 2; 
} 

#password { 
    display: flex; 
    flex-direction: row; 
    align-items: center; 
    margin-bottom: 5%; 
} 

/* -- Show password -- */ 
#eye { 
    height: auto; 
    max-width: 15%; 
    margin-right: 3%; 
} 

/* -- Login element -- */ 
form.login p { 
    font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif; 
    font-size: 2vw; 
    max-width: 100%; 
    height: auto; 
    line-height: 2%; 
} 

form.login input[type=password] { 
    max-width: 100%; 
    width: 100%; 
    height: auto; 
} 

このコードをさらにやっていることを説明するために： を - ボディはフルを持っていますサイズの背景画像をブラウザウィンドウ - 「センターは、」本質的背景 上記半透明の白い長方形である - ロゴや要素ログインフォームは、私はまた、彼らのフレックス項目（に対処するための3つのフレックスコンテナを作成している

白い長方形をオーバーラップ） 1）本体はフレックスコンテナで、フレックスアイテムはセンターエレメントです 2）センターはフレックスコンテナで、ロゴとフォーム入力セクション（つまり、 「+」フィールドはフレックスアイテムです。 3）「パスワード」divはフレックスコンテナ（インライン）で、目とログインフィールドはフレックスアイテムです

現在のコードで実現いくつかのスケーリングがあるようですので、問題は...、ある

フルHTMLはここで見つけることができます：https://pastebin.com/6tS6SXi3を、フルCSSは、ここで見つけることができます：事前にhttps://pastebin.com/6M11HnJE

感謝を！

EDIT：

さらに実験した後、それは

は、それが使用していないにもかかわらず、そのシンプルさのための答えを受け入れた...私は単にセンタークラスの高さが自動であるとする必要があったことが判明私はHTMLとCSSの代わりのときに、画面サイズの変更を制御することは非常に困難である画像を、使用してフォームのラッパーを構築し

Answer 1

にそれを望んでいたはずのようなフレックスボックス。

サンプル： https://codepen.io/anon/pen/NgPGoQ

.login { 
    width: 300px; 
} 

@media screen and (max-width: 768px) { 
    .login { 
    width: 80%; 
    } 
} 

あなたのラッパーのデフォルトの幅を設定し、カスタムの幅をご希望の画面サイズ用のメディアクエリを追加します。

Answer 2

アップ..

モバイルからスタートデスクトップに携帯からこのような何か（obliviouslyあなたが望むものに100％に調整）

仕事と私はあなたがそれに対処するため、あなたの状況が簡単に見つかりますthinki道..

これは私のために細かいサイズを変更し..

@media (max-width:768px){ 
    .center { 
    max-width: 100%; 
    max-height: 100%; 
    width: 100%; 
    height: 100%; 
    } 

/* -- Logo style -- */ 
#logo { 
    max-width: 100%; 
    height: auto; 
} 

/* -- Form styles -- */ 
form.login { 
    max-width: 100%; 

} 

#password { 
max-width:100% 
} 

/* -- Show password -- */ 
#eye { 
    max-width: 100%; 
} 

/* -- Login element -- */ 
form.login p { 
    max-width: 100%; 
    height: auto; 
} 

form.login input[type=password] { 
    max-width: 100%; 
    width: 100%; 
    height: auto; 
} 


}