vwとvhで応答するウェブサイト、画面が小さすぎると同じサイズ（px）に留まる

Question

ウェブサイトをvhとvwのスケーリングで完全に作成しました。さて、大きな画面では、これは十分に反応しますが、今はモバイル画面で反応させたいと思っています。私のウェブサイトでは、すべてのコンテンツが画面の中央60％以内にあります。形、画像、テキストがあります。私が画面を小さくしすぎると、もはやテキストを読むことができませんが、画面の40％はまだ空白です（背景のみ）。さて、画面が狭すぎると、左右の余白（画面の空白部分）が小さくなり、コンテンツが小さくならないようにします。あなたはvwとvhを使ってこれをやってもいいですか、それともピクセル単位ですべてを変更しなければなりませんか？

たとえば、画面が500pxより狭いが運がない場合は、本体を200vwにするなどしてこれを試しました。

誰でも手伝ってもらえますか？私の要素の位置がすべて静かな複雑なので、私は再びピクセルでそれをすべてやり直さなければならなかった。

ありがとうございます！

Answer 1

は、私の頭に浮かんだ3つの解決策があります。

1. ブレークポイントの使用分幅&幅組み合わせ
2. 流体レイアウト

1.ブレークポイントを使用して

： したがって、ドキュメントの幅iが60である場合、メインのコンテナ要素の幅を60％に設定する必要があります768pxより大きい（たとえば、最大モバイル解像度）。コードは次のようになります。

.container { 
    margin: 0 auto; // horizontally centering element 
    background-color: pink; // just to see where the element is 
} 

// targeting mobile screen size: 
@media only screen 
and (max-width: 768px) 
and (-webkit-min-device-pixel-ratio: 2) { 
    width: calc(100% - 30px); 
} 

// targeting larger screens 
@media only screen 
and (min-width: 769px) 
and (-webkit-min-device-pixel-ratio: 2) { 
    width: 60vw; 
} 

2分幅：あなたもあなただけの何を確定する必要があるビューポート単位、とスタイルの他の要素の子要素を持っている場合は、おそらく簡単に解決策が、それは良いではありません幅が最小のcontainerの幅で、それは正しく表示され、プロパティの値として設定されます。このFluid techniqueである上記のいずれもができれば

.container { 
    margin: 0 auto; // horizontally centering element 
    background-color: pink; // just to see where the element is 
    width: 60vw; 
    min-width: 320px; 
} 

---

はたぶん、第三、あなたを助けることができる最も先進的な技術は、実際にタイポグラフィの中で最も興味深いです、このスマッシング雑誌の記事で詳細に説明しましたレイアウトの最も一般的なテクニックは、最初に説明したものです。

私は助けてくれることを願っています。