モバイル用の「位置：絶対」の固定

Question

ウェブサイトのパーセンテージとVWのフォントサイズを使用してウェブサイト全体を拡大したり、ウィンドウを大きくしたり小さくしたりしないように変更しました。画像を重ね合わせなければならない部分がいくつかありました。これは、「Position：Absolute」の部分がナビゲーションバーであり、2「私のメーリングリストに登録する」入力ボックスを使って実現しました。

モバイルデバイスの幅を右回りに撮ったとき（私は分かりませんが、おそらく300ピクセルですか？）、サイト全体がうまくいきます。

これは、ナビゲーションバーのための私のCSSです：http://pastebin.com/raw/QpjPiN4Z

それがウェブサイトの他の部分に影響を与えない場合、私は何とか位置を変えることができる方法のいくつかの並べ替えがあった場合、私は不思議でしたか？または、メディアのクエリを何らかの形で使用して、それを修正するのを助けてください。私は何をすべきか分かりません。私が "Position："タイプを変更するたびに、それはひどく壊れます。

Answer 1

Cesarが提案したように、CSSでメディアのクエリを使用して上書きします。オーバーライドするピクセルを指定します。

@media (min-width: 1px) and (max-width: 300px) { 
// Do css overrides here 
} 

オーバーライドの最小/最大ピクセル幅を操作してから、CSSを開始するだけです。あなたが上書きされることはありませんスタイルに実行する場合、このような何かを：！物事を上書きします

.container { height: 500px !important; } 

重要なフラグはあなたがそれらを上書きさせたくないようです。あなたがあなたの心を失うことに近い時に便利です。途中であなたを助けるために、chrome/firefox Inspect Elementを使用してください。