양식으로 구성된 간단한 페이지가 있습니다. 입력 상자를 입력 한 다음 입력 상자를 입력하기위한 문자열이 있습니다.다른 장치 크기의 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>
곳이 일을 당신의 시도는 무엇입니까? – putvande
내가 생각하기 시작할 곳은 @media 화면을 사용하고 (최대 너비 : 699px) { } 하지만 내가 무엇을 넣을 지 모르겠습니다. 화면이이 요구 사항을 충족하면이 CSS가 적용된다는 것을 알고 있지만 특정 div를 인라인에서 인라인으로 갑자기 이동시키는 방법을 모르겠습니다. – Matthew
먼저 모바일 장치 용으로 개발할 때 웹 개발이 가장 쉽습니다. 그런 다음 'min-width'를 사용하여 작업하십시오. 'max-width'로 다른 방향으로 나아가는 것은 거대한 잡무입니다. –