複数の幅を持つ要素

Question

複数の幅のオブジェクト（divやimgなど）を指定することはできますか？オブジェクトの通常の幅は720ピクセルですが、ユーザーの画面サイズが720ピクセルより小さい場合、要素の幅は自動的に100％に変更されますか？

HTMLやCSSのみを使用するソリューションがあり、JavaScriptが含まれていないとよいでしょう。なぜなら私はそれに精通していないからです。 （しかし、これを達成するためのJavaScriptが唯一の方法であれば、それは本当に簡単です。私は5のように説明してください）

Answer 1

はい、1つの可能な方法はmax-widthとwidthを使用することです：

.foo { 
    max-width: 720px; 
    width: 100%; 
} 

さまざまな画面サイズに応じて、さまざまな幅を使用したい場合は、別のアンサーで説明したように、CSS media queriesがおすすめです。

Answer 2

おそらくmedia queriesを調べたいと思うかもしれません。これにより、さまざまな画面サイズに異なるCSSを設定できます。

多くのメディア機能は範囲機能であり、「最小条件」または「最大条件」の制約を表すために「min-」または「max-」という接頭辞を付けることができます。たとえば、このCSSはブラウザのビューポートの幅が12,450px以上に狭くなっている場合にのみスタイルを適用します。

@media (max-width: 12450px) { ... }

Answer 3

メディアクエリー

Media Queries Demystified

あなたのCSSは次のようになります。

.element { 
    width: 75%; 
} 
@media screen and(max-width: 720px){ 
    .element{ 
     width: 100%; 
    } 
} 

これは、要素のサイズを設定し、こう述べています。画面は、この幅以下であれば、やりますこの。

Answer 4

CSSでは、@mediaとセレクタと述語のさまざまな組み合わせを使用して、画面の種類とサイズを照会できます。あなたは、例えば、複数のサイズで複数のCSSを使用する必要が

div { 
    width: 720px; 
} 

@media screen and (max-width: 720px) { 
    div { 
     width: 100%; 
    } 
} 

Answer 5

：

以下は（プリントとは対照的に）、画面の最大幅が720個の画素）である媒体はスクリーンであることテストを提供します

@media (max-width: 700px) { 
    .item{ 
     width:100%; 
     } 
} 
@media (max-width: 1100px) { 
    .item{ 
     width:80%; 
     } 
} 

または

のような、この目的のために自由で完全かつ柔軟なフレームワークを使用してブートストラップ

世界で最も一般的なフロントエンドコンポーネントライブラリ を使用して、モバイルで最初に反応しやすいプロジェクトをWeb上に構築します。

ブートストラップは、HTML、CSS、および JSで開発するためのオープンソースのツールキットです。 Sass変数とミックスイン、応答性の高いグリッドシステム、豊富な組み込みの コンポーネント、jQuery上に構築された強力なプラグインを使用して、素早くアイデアのプロトタイプを作成したり、アプリケーション全体を構築できます。 Bootstrap