モバイルで幅33.33％のDivsを100％の幅に変更

Question

私はjavascriptでこれを行う方法を知っています。これを行うにはファンシーなCSSがあるかどうか疑問に思っています。私はそれが欲しいので、私は各divは、画面全体を携帯電話に行く。これは現在のように見えます。

ここでそれぞれのdivのためのいくつかのCSSです。

.center{ 


background-color:#ffffff; 
    width:33.33%; 
    height: 100%; 
    display: inline-block; 

} 

.left{ 
    background-color:#ffffff; 
    width:33.33%; 
    height: 100%; 
    float:left; 
    overflow: hidden; 

} 

.right{ 
    background-color:#ffffff; 
    width:33.33%; 
    height: 100%; 
    float:right; 
    overflow: hidden; 
} 

Answer 1

あなたはdiv要素は、すべての幅を取る、とmedia queriesに基づいて、異なるスタイルを適用したいもの分解能で決定します。 This is how bootstrap does it.

600pxの幅のブレークポイントでの基本的な例。

@media (max-width: 600px) { 
    .mybox { 
    width:100%; 
    } 
} 

Answer 2

間違いなく、同じ意味で使用できる「ファンシー」な方法があります。 まず、ブートストラップライブラリを使用して、htmlに反応させることができます。 http://getbootstrap.com/

また、同じタスクを実行できるcssメディアクエリを使用することもできます。 ここに同じのためのリンクがあります：https://www.w3.org/TR/css3-mediaqueries/

希望の解像度を選択し、あなたのCSSを適用します。

@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ } 
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ } 
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ } 
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ } 
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ } 
@media (min-width:1281px) { /* hi-res laptops and desktops */ } 

Answer 3

@media screen and (max-width: 600px) { 
    .center, 
    .left, 
    .right { 
     width: 100%; 
    } 
} 

画面幅はその後のdivが100％の幅になった600PXよりも小さい場合。

あなたは、最大幅はあなたへの適応の値を変更することができますが、CSSで条件付き書式について

Answer 4

を必要とする、あなたはメディアクエリを使用することができます。不幸にも、モバイルに関するメディアクエリはありません。ただし、最大値を設定することはできます。幅。たとえば：

@media only screen and (max-device-width: 600px){ 
    ... 
} 

この方法で、600PXその後、小さな画面の幅を持つ任意のデバイスは...上でCSSを取得します。