ウェブとモバイルの2つの異なるデザインの使い方

Question

私のウェブページにはあるデザインをしたいと思っています。私は説明するために写真を追加します。ここで

iは Web そしてここで使用したいデザインが Mobile ためのスケッチである私は、ここで瞬間 でメディアクエリを使用する方法を完全に確認していない、これまで

コードです

HTML 幼児 子供2+

<div class="row"> 
     <div class="full-time col-sm-12 col-md-12 col-lg-2">Full Time</div> 
     <div class="prices-left-box col-sm-12 col-md-12 col-lg-5"> 
      <div class="prices-left">$200 Per Week</div> 
     </div> 
     <div class="prices-right-box col-sm-12 col-md-12 col-lg-5"> 
      <div class="prices-right">$150 Per Week</div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="full-time col-sm-12 col-md-12 col-lg-2">Up to 4 Hours</div> 
     <div class="prices-left-box col-sm-12 col-md-12 col-lg-5"> 
      <div class="prices-left">$125 Per Week</div> 
     </div> 
     <div class="prices-right-box col-sm-12 col-md-12 col-lg-5"> 
      <div class="prices-right">$100 Per Week</div> 
     </div> 
    </div> 
</div> 

とCSS：

@media (max-width: 992px) { 
    .infants{ 
     color: black; 
     background-color: #7FC7AF; 
     font-size: 36px; 
     font-weight: bold; 
     font-family: "open sans"; 
     height: 125px; 
     width: 304.3px; 
     text-align: center; 
     margin: auto; 
     display: inline-block; 
    } 

    .children{ 
     color: black; 
     background-color: #FF9E9D; 
     font-size: 36px; 
     font-weight: bold; 
     font-family: "open sans"; 
     height: 125px; 
     width: 304.4px; 
     text-align: center; 
     padding: auto; 
     display: inline-block; 
    } 
} 

.infants{ 
    color: white; 
    background-color: #7FC7AF; 
    font-size: 36px; 
    font-weight: bold; 
    font-family: "open sans"; 
    height: 87px; 
    width: 304.3px; 
    text-align: center; 
} 

.infants-box{ 
    padding-left: 176px; 
    padding-right: 80px; 
} 

.children{ 
    color: white; 
    background-color: #FF9E9D; 
    font-size: 36px; 
    font-weight: bold; 
    font-family: "open sans"; 
    height: 87px; 
    width: 304.4px; 
    text-align: center; 
} 

.payment-method{ 
    font-size: 24px; 
    padding-bottom: 57px; 
    padding-top: 57px; 
    text-align: center; 
    font-family: "Source Sans Pro"; 
    font-weight: 600; 
    font-style: italic; 
    font-size: 24px; 
    line-height: 30px; 
    color: #4B4B4B 
} 

.full-time{ 
    background-color: #454545; 
    color: white; 
    font-size: 24px; 
    font-weight: bold; 
    font-family: "open sans"; 
    height: 150px; 
    margin: auto; 
    width: 176px; 
    text-align: center; 
} 
.prices-left-box{ 
    background-color: white; 
    width: 304.4px; 
    height: 150px; 
} 
.prices-left{ 
    font-family: "source sans pro"; 
    font-size: 24px; 
    width: 304.3px; 
    margin-right: 220px; 
    text-align: center; 
} 

.prices-right-box{ 
    background-color: #ffffff; 
    width: 304.4px; 
    margin-left: 10%; 
    height: 150px 
} 

.prices-right{ 
     font-family: "source sans pro"; 
    font-size: 24px; 
    background color: white !important; 
    text-align: center; 
} 
.background-pricing{ 
    background-color: #F0F0F0; 
    padding-bottom: 84px; 
} 

Answer 1

あなただけgridを参照し、参照されるように、あなたのクラス名に変更を適用し、Bootstrapを使用しているということになります。また、ドキュメントにこれらResponsive Utilitiesを見ることができます：

あなたはこのようなあなたの上記のスニペットを書き換えてみてください、上記のコードを使用する必要がない場合：

@media only screen and (max-width: 992px) { 
    .infants{ 
      /* 
      Custom CSS here 
      ... 
      */ 
    } 
} 

Answer 2

私はhttp://getbootstrap.com/css/#gridとBootstrap Responsive Utilitiesのドキュメントをチェックアウトをお勧めしますより小さなモバイル画面のために行グリッド構造を積み重ねる反応性レイアウトを作成します。

デスクトップの代わりにモバイル用にレイアウトを作成することをおすすめします。 .col-xs-*で正しいモバイルレイアウトを得る上で動作し、その後、.col-md-*、最終的に大規模なデバイスで、.col-sm-*とタブレットサイズに大きなタブレットとデスクトップを移動するには、.col-lg-*とデスクトップ。オプションの良い例については、このコードペンを参照してください - http://codepen.io/arsinak/pen/qDgvt/

あなたの列に.COL-XS- * .COL-MD-*を追加することで、余分な中小デバイスグリッドクラスを使用します。 Example: Mobile and desktop。あなたのコンテナやグリッドシステムのために独自のCSS内のメディアクエリーを定義する必要はありません

は、ブートストラップは、これを処理します。メディアクエリに基づいてCSSを定義する必要がある場合。最初にモバイル向けCSSを作成してから、画面サイズに応じてスケールアウトすることをおすすめします。

クリーンアップすることも

/*========== Mobile First Method ==========*/ 

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px){ 

} 

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px){ 

} 

/* Small Devices, Tablets */ 
@media only screen and (min-width : 768px){ 

} 

/* Medium Devices, Desktops */ 
@media only screen and (min-width : 992px){ 

} 

/* Large Devices, Wide Screens */ 
@media only screen and (min-width : 1200px){ 

} 

あなたのCSSと私は理解し、保守が容易である明確な方法であなたのCSSを構造化するBEM MethodologyとともにSASSを使用することをお勧めし繰り返しコードを減らします。