2017-02-12 11 views
1

CSSでメディアクエリを使用せずに、すべての画面サイズに適合するウェブサイトを作成する方法/コードがありますか? 応答的な画面サイズ

私が使用しているスタイルは、CSSスタイルでブートストラップないでもフレキシボックス

+0

あなたの質問/問題をさらに記述してください。 1つの段落を持つシンプルなWebサイトは、どんなデバイスでも簡単に反応します。とにかくメディアクエリーを使用したくないのはなぜですか? – faviouz

+0

モバイル、デスクトップ、タブレット用に表示する必要があるウェブサイトを作成する必要があります。しかし、私は、3つのデバイスの画面サイズと解像度が異なることに気が付きました。私は別の画面サイズのディメンションのためのGoogleの検索を行ったと私は非常に多くがあることに気づいた。私はCSSでメディアクエリを使用するとき、適切な調整を行うために異なる画面サイズをターゲットにすることができます。 しかし、私は調整するために最適な画面サイズがわからない。 – cord

+0

また、そのことを念頭に置いて、私はウェブサイトの折り目を作成する必要があります。 私はウェブサイトの折り目を作成する必要があることを知っている私はすべての画面の寸法をカットオフと高さはどこにわからない – cord

答えて

2

あなたはvh(1ウィンドウの高さの%)とvw(ウィンドウ幅の1%)の単位を使用することができます代わりにあなたのCSS定義で(そしてcalc(...)望ましい値)。

Btw。フレックスボックス CSSスタイルであり、次に考慮すべきことです。

0

あなたはそれが固定されます応答設計のためのCSSファイルに

width:100% 

を使用することはできますが、その後4 div要素を持っている場合は、25%以下を使用する必要があります。それはすべてのセクションに動作しますが、それは、モバイルデバイスであれば、全画面サイズが、その後など500pxなどであるあなたが

width:25% 

enter image description here を使用するときに、その後ので、もしこれを見るために4 divが非常に小さいサイズが表示されますし、それが良いではないでしょうメディアのクエリを使用すると、それは正常に見えます。あなたの目的のためにパーセント(%)が働きます

+0

スクリーンショットありがとう、どのように折り畳まれた各ウィンドウの高さのために開発するのだろうか?応答設計幅が – cord

+0

であることが最も重要ですが、高さを固定したい場合は、%とpxが機能します。この場合、%はautoを画面として調整し、pxを使用すると画面が小さい場合はスクロールが表示され、画面が大きい場合は画面が空白になります –

関連する問題