다른 장치 크기의 CSS

-1

양식으로 구성된 간단한 페이지가 있습니다. 입력 상자를 입력 한 다음 입력 상자를 입력하기위한 문자열이 있습니다.다른 장치 크기의 CSS

두 가지 다른 행동이 필요합니다. 휴대 전화가 페이지에 액세스 할 때 나는 모든 것을 서로 겹치기를 원합니다. 그러나 컴퓨터를 통해 페이지에 액세스 할 때 제목이 여러 줄로 구성되고 동일한 행에 입력 상자가 오는 것이 좋습니다.

저는 미디어 쿼리에 대해 조사해 봤지만 아직 충분히 이해하지 못했습니다.

<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

먼저 모바일 장치 용으로 개발할 때 웹 개발이 가장 쉽습니다. 그런 다음 'min-width'를 사용하여 작업하십시오. 'max-width'로 다른 방향으로 나아가는 것은 거대한 잡무입니다. –

-1

미디어 쿼리가 필요합니다. 미디어 쿼리는 기본적으로 다양한 너비가있는 장치에 대해 서로 다른 CSS를 작성합니다. 당신은 또한이 article-을 확인 여기 - https://www.w3schools.com/css/css3_mediaqueries_ex.asp

에서 더 많은 것을 배울 수 https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

또한 여기에 .. 같은 사용 matchmedia에 대한 을 jQuery를 사용하는 당신은 - 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의 예입니다 수 있습니다

또는 당신은 여러 선택의 여지가 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의 검색어에 대해 여러 가지 해결책을 제공 했으므로 @putvande를 사용하여 반대표를 삭제할 수 있습니까? 감사합니다. –

같은 간단한을 사용할 수 있습니다 : 부트 스트랩을 사용하여 윈도우 크기 조정시 그리드를 다른 방식으로 쉽게 표시 할 수 있습니다. 또한 미디어 쿼리를 사용하거나 Flexbox 또는 Grid 같은 그리드 레이아웃과 결합 할 수 있습니다. 또는 Jquery와 windworesize 함수를 사용하십시오. Personnaly, 나는 창이 스마트 폰이나 타블렛의 크기에 도달 할 때 Flexbox와 플렉스 방향 적절성을 선택할 것입니다. 미디어 쿼리를 작성하려면 @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

답변

관련 문제