異なるデバイスサイズのCSS

-1

私はフォームからなる単純なページを持っています。入力ボックスと入力ボックスの文字列があります。異なるデバイスサイズのCSS

2つの異なる動作が必要です。携帯電話がページにアクセスしているときは、すべてを重ねて表示したいのですが、コンピュータを介してページにアクセスするときは、同じ行の入力ボックスが続く複数の行が必要になります。

私はメディアのクエリを調査しましたが、まだ理解していません。

<html> 
    <head> 
     <style> 

     </style> 
    </head> 
    <body> 
     <form> 

      <center> 
      <div class="left"> 
       First name: 
      </div> 
      <div class="right"> 
       <input type="text" name="firstname"/> 
      </div> 
      <div class="left"> 
       Last name: 
      </div> 
      <div class="right"> 
       <input type="text" name="lastname"/> 
      </div> 
      <div class="left"> 
       Email Address: 
      </div> 
      <div class="right"> 
       <input type="text" name="email"/> 
      </div> 
      <div class="left"> 
       Address: 
      </div> 
      <div class="right"> 
       <input type="text" name="address"/> 
      </div> 
      <div class="left"> 
       I've practiced yoga for at least one year: 
      </div> 
      <div class="right"> 
       <input type="checkbox" name="oneyear"/> 
      </div> 
      <div class="right"> 
       <input type="submit" name="submit" value="submit"/> 
      </div> 

      </center> 
     </form> 
    </body> 
</html>

出典

2017-12-31 Matthew

どここの作品を作るために、あなたの試みはありますか？ – putvande

私が始めようと思う唯一の場所は、@media画面を使用して（最大幅：699px）{ } ですが、私はそこに何を入れるのか分かりません。画面がこの要件を満たしていれば、このCSSが適用されることを理解していますが、特定のdivを突然インラインからインラインに移行させる方法がわかりません。 – Matthew

最初にモバイルデバイス用に開発する場合、Web開発は常に最も簡単です。その後、 'min-width'を使用して作業を進めてください。 'max-width'を使って逆に進んでいくのは大変な仕事です。 –

-1

これはMedia Queryが必要です。メディアクエリは基本的に幅の異なるデバイス用に異なるCSSを記述しています。あなたはここにがyou-がhttps://jsbin.com/kutacuzece/edit

(function($) { 



    /* 
     * We need to turn it into a function. 
     * To apply the changes both on document ready and when we resize the browser. 
     */ 

     function mediaSize() { 
      /* Set the matchMedia */ 
      if (window.matchMedia('(min-width: 768px)').matches) { 
      /* Changes when we reach the min-width */ 
       $('body').css('background', '#222'); 
       $('strong').css('color', 'tomato'); 

      } else { 
      /* Reset for CSS changes – Still need a better way to do this! */ 
       $('body, strong').removeAttr('style'); 
      } 
     }; 

     /* Call the function */ 
     mediaSize(); 
     /* Attach the function to the resize event listener */ 
     window.addEventListener('resize', mediaSize, false); 

    })(jQuery);

ためJSbinの一例である..あなたも同じ使用matchmediaのためのjQueryを使用することができ、このarticle-をチェックアウト https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

またhere- https://www.w3schools.com/css/css3_mediaqueries_ex.asp

からより多くを学ぶことができます

それとも、あなたが複数の選択肢を持っているthis-

if ($(window).width() < 960) { 
    $(selector).css({property:value, property:value, ...}) 
} 
else if ($(window).width() < 768) { 
    $(selector).css({property:value, property:value, ...}) 
} 
else { 
    $(selector).css({property:value, property:value, ...}) 
}

出典

2017-12-31 16:19:07

OPはメディアクエリを調査して答えがあまり役に立たないと言っています。おそらく、問題をどのように解決できるかの例を挙げることができます。 – putvande

OPの質問に対して複数の解決策を提供しているので、あなたは負の投票を削除してください。ありがとう –

ような単純なものを使用することができます：ブートストラップを使用して、ウィンドウのサイズ変更時に異なる方法でグリッドを簡単に表示する。また、メディアクエリを使用して、FlexboxやGridなどのグリッドレイアウトと組み合わせることもできます。また、Jqueryとwindworesize関数を使用することもできます。 Personnaly、私は、フレックスと、フレックス方向の適性を選択するウィンドウがスマートフォンやタブレットのサイズに達したとき。メディアクエリーを書くには、例えば@media screenと（max-width：640px）のようなものを入力し、中括弧の中にルールを書いてください。

出典

2017-12-31 16:37:35

サンプルコードです。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <style> 
 
     * { 
 
      margin: 0; 
 
      padding: 0; 
 
      box-sizing: border-box; 
 
     } 
 
     html, 
 
     body { 
 
      height: 100%; 
 
      font-size: 16px; 
 
      line-height: 22px; 
 
      font-family: Arial, Helvetica, sans-serif; 
 
      background-color: #f5f5f5; 
 
     } 
 

 
     .clearfix::after { 
 
      content: ""; 
 
      clear: both; 
 
      display: table; 
 
     } 
 

 
     .my-form { 
 
      width: 100%; 
 
      max-width: 920px; 
 
      margin: 0 auto; 
 
      padding: 20px; 
 
     } 
 

 
     .my-form .input { 
 
      width: 100%; 
 
      padding: 10px; 
 
     } 
 

 
     .my-form .input .left { 
 
      display: block; 
 
      width: 100%; 
 
      line-height: 24px; 
 
      padding: 3px 0; 
 
      margin-bottom: 5px; 
 
     } 
 

 
     .my-form .input .right { 
 
      width: 100%; 
 
     } 
 

 
     .my-form .input input[type='text'], .my-form .input input[type='email'], .my-form .input textarea { 
 
      display: block; 
 
      width: 100%; 
 
      height: 30px; 
 
      font-size: 16px; 
 
      padding: 3px; 
 
      line-height: 22px; 
 
      border: 1px solid rgba(0,0,0,.3); 
 
     } 
 

 
     .my-form .input textarea { 
 
      height: auto; 
 
      min-height: 60px; 
 
      resize: vertical; 
 
     } 
 

 
     .my-form .input input[type='submit'] { 
 
      display: block; 
 
      width: 100%; 
 
      padding: 15px; 
 
      background-color: navy; 
 
      color: #ffffff; 
 
      font-size: 16px; 
 
      line-height: 22px; 
 
     } 
 

 
     @media screen and (max-width: 1024px) { 
 
      .my-form .input:after { 
 
       content: ""; 
 
       clear: both; 
 
       display: table; 
 
      } 
 
      .my-form .input .left { 
 
       float: left; 
 
       width: 35%; 
 
       padding-right: 10px; 
 
       margin-bottom: 0; 
 
      } 
 
      .my-form .input .right { 
 
       float: right; 
 
       width: 65%; 
 
      } 
 
     } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <form class="my-form"> 
 
     <div class="input"> 
 
      <label class="left" for="firstname"> 
 
       First name: 
 
      </label> 
 
      <div class="right"> 
 
       <input type="text" id="firstname" name="firstname" /> 
 
      </div> 
 
     </div> 
 
     <div class="input"> 
 
      <label class="left" for="lastname"> 
 
       Last name: 
 
      </label> 
 
      <div class="right"> 
 
       <input type="text" id="lastname" name="lastname" /> 
 
      </div> 
 
     </div> 
 
     <div class="input"> 
 
      <label class="left" for="email"> 
 
       Email Address: 
 
      </label> 
 
      <div class="right"> 
 
       <input type="email" id="email" name="email" /> 
 
      </div> 
 
     </div> 
 
     <div class="input"> 
 
      <label class="left" for="address"> 
 
       Address: 
 
      </label> 
 
      <div class="right"> 
 
       <textarea cols="10" rows="5" id="address" name="address"></textarea> 
 
      </div> 
 
     </div> 
 
     <div class="input"> 
 
      <div class="left"></div> 
 
      <div class="right"> 
 
       <label for="oneyear"><input type="checkbox" id="oneyear" name="oneyear" /> I've practiced yoga for at least one year:</label> 
 
      </div> 
 
     </div> 
 
     <div class="input"> 
 
      <input type="submit" name="submit" value="submit" /> 
 
     </div> 
 
    </form> 
 
</body> 
 

 
</html>

出典

2017-12-31 16:47:14 metinata

異なるデバイスサイズのCSS

答えて

関連する問題