レスポンシブルな振る舞いのためのスタイリング

Question

私はこれが多くの人にとってベビーなものだと確信していますが、私はちょうどそれを正しくすることはできません。私が微調整すればするほど、結果が得られます。私の努力の結果を説明する必要はありません。代わりに、ここでビューポートとして所望の効果が縮小されています

下の画像は、私が実際に生産てるものではありません。それは私が起こりたいものです。代わりに私はすべてをやっている要素を持っていますが、これは画像の下にテキストの折り返しが最も厄介なものです。

メディアクエリを含め、誰かが私にとって最も効率的なコードを指摘できる場合は、感謝します。

Answer 1

私はあなたのCSSで@mediaのクエリを使用していると確信していますので、特に断りのない限り、これを仮定します。あなたはそれを見ることができる

一つの方法はこれです：2 & 3.

そして、アイテムのinline-blockにdisplayプロパティを設定し

、アイテムの 3〜50％に設定した場合ビューポートのサイズが600px（デスクトップ/タブレット）を超えています。これは、彼らが横に並んで座るようになります。

注：正しく動作するには、box-sizing: border-box;を使用する必要があります。あなたが罫線を使用しているかどうかによって異なります。

はその後、（モバイル用）未満600PX用メディアクエリで、画面の幅を埋めるために100%にアイテム2 & 3のwidth秒を設定します。

これは、それらがお互いの下にうまくカスケードするようにします。

また、Bootstrapを使用して見ることをお勧めします。これは、応答性の高いWebサイトコーディングを邪魔にするためです。

希望すると便利です。

Answer 2

私はここでもっと賢い解決策はmedia queriesを使用していると思います。彼らが何であるかわからない場合に備えて、私はあなたに少しの背景を与えます。

あなたはスタイルシートを作成すると、作成したスタイルは、クラス、IDSのようなあなたは、セレクタを使用してターゲット要素に適用されている、など

Media queriesをすることができます、あなたが例えば、そのCSSルールに条件を設定することができます画面サイズに応じてルールを作成します。

どのように動作するかを確認するには、このフィドルを参照してください。

.short { 
 
    width: 50%; 
 
    float: left 
 
} 
 
@media screen and (max-width: 500px) { 
 
    .short { 
 
    width: 100%; 
 
    float:none; 
 
    } 
 
}

<p> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum purus vel purus tempor, id lobortis sem placerat. Phasellus sed magna varius, fermentum velit sed, vestibulum ante. In enim est, iaculis in neque sed, dictum venenatis nulla. 
 
    Fusce sit amet auctor augue. Vestibulum at dui ipsum. Sed vehicula bibendum eros sed feugiat. Fusce cursus mi non eros eleifend, viverra tempus massa accumsan. Maecenas venenatis purus sit amet metus ornare, at feugiat ex bibendum. Aliquam erat volutpat. 
 
    Vivamus tristique odio non elit imperdiet, vel ornare diam suscipit. Pellentesque ultrices, tortor vitae varius vehicula, metus mi porta est, tincidunt posuere lorem turpis non justo. Nulla ullamcorper dolor a mattis ornare. 
 
</p> 
 

 
<p> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum purus vel purus tempor, id lobortis sem placerat. Phasellus sed magna varius, fermentum velit sed, vestibulum ante. In enim est, iaculis in neque sed, dictum venenatis nulla. 
 
    Fusce sit amet auctor augue. Vestibulum at dui ipsum. Sed vehicula bibendum eros sed feugiat. Fusce cursus mi non eros eleifend, viverra tempus massa accumsan. Maecenas venenatis purus sit amet metus ornare, at feugiat ex bibendum. Aliquam erat volutpat. 
 
    Vivamus tristique odio non elit imperdiet, vel ornare diam suscipit. Pellentesque ultrices, tortor vitae varius vehicula, metus mi porta est, tincidunt posuere lorem turpis non justo. Nulla ullamcorper dolor a mattis ornare. 
 
</p> 
 
<p class="short"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum purus vel purus tempor, id lobortis sem placerat. Phasellus sed magna varius, fermentum velit sed, vestibulum ante. In enim est, iaculis in neque sed, dictum venenatis nulla. 
 
    Fusce sit amet auctor augue. Vestibulum at dui ipsum. Sed vehicula bibendum eros sed feugiat. Fusce cursus mi non eros eleifend, viverra tempus massa accumsan. Maecenas venenatis purus sit amet metus ornare, at feugiat ex bibendum. Aliquam erat volutpat. 
 
    Vivamus tristique odio non elit imperdiet, vel ornare diam suscipit. Pellentesque ultrices, tortor vitae varius vehicula, metus mi porta est, tincidunt posuere lorem turpis non justo. Nulla ullamcorper dolor a mattis ornare. 
 
</p> 
 
<p class="short"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum purus vel purus tempor, id lobortis sem placerat. Phasellus sed magna varius, fermentum velit sed, vestibulum ante. In enim est, iaculis in neque sed, dictum venenatis nulla. 
 
    Fusce sit amet auctor augue. Vestibulum at dui ipsum. Sed vehicula bibendum eros sed feugiat. Fusce cursus mi non eros eleifend, viverra tempus massa accumsan. Maecenas venenatis purus sit amet metus ornare, at feugiat ex bibendum. Aliquam erat volutpat. 
 
    Vivamus tristique odio non elit imperdiet, vel ornare diam suscipit. Pellentesque ultrices, tortor vitae varius vehicula, metus mi porta est, tincidunt posuere lorem turpis non justo. Nulla ullamcorper dolor a mattis ornare. 
 
</p> 
 
<p> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum purus vel purus tempor, id lobortis sem placerat. Phasellus sed magna varius, fermentum velit sed, vestibulum ante. In enim est, iaculis in neque sed, dictum venenatis nulla. 
 
    Fusce sit amet auctor augue. Vestibulum at dui ipsum. Sed vehicula bibendum eros sed feugiat. Fusce cursus mi non eros eleifend, viverra tempus massa accumsan. Maecenas venenatis purus sit amet metus ornare, at feugiat ex bibendum. Aliquam erat volutpat. 
 
    Vivamus tristique odio non elit imperdiet, vel ornare diam suscipit. Pellentesque ultrices, tortor vitae varius vehicula, metus mi porta est, tincidunt posuere lorem turpis non justo. Nulla ullamcorper dolor a mattis ornare. 
 
</p>

CSSは簡単です。最初のものはクラスshortで、これは常に要素に適用されます。次に、media queryは、囲むCSSルールがwidthが500pxの場合にのみ適用されることを示しています。

Answer 3

私は、応答性のWebページ上のプロジェクトを持っていたし、それがすべての基本ですので、私は新しい学習者です：

https://github.com/nirupaboricha/Responsive_Webpage

はそれが便利ですなら、私に教えてください。