Página Responsivo

[Rodrigo5468 0]

Olá galerinha!

 

Bom, eu sou bem novo nesse assunto e quais em todos. Eu procurei varias coisas no Google falando sobre layout, formulários, páginas, etc... tudo falando sobre responsividade.

Eu não encontrei nada que me explica-se ou ensina-se a fazer esse tipo de coisas. Eu fiz um formulário e gostaria que ele fosse responsivo, fiz algumas tabelas e tudo mais não foi, alguém pode me dar uma força? Só tenho o HTML.

<form style="float:left;padding:5px;">
	<fieldset>
		<legend>Loja Virtual</legend><br/>
		
		<div id="main">
			<div id="row">
				<div id="cel1">
					<label>Comprador:</label><br/>
					<input type="text" name="nome1" size="50"/><br/><br/>
				</div>
				
				<div id="cel2">
					<label>Vendedor:</label><br/>
					<input type="text" name="nome2" size="50"/><br/><br/>
				</div>
				
				<div id="cel3">
					<label>Data da Compra:</label>
					<label style="float:right;">Hora da Compra:</label><br/>
					
					<input type="date" name="nome3" size="50"/>
					<input type="time" name="nome4" size="50" style="float:right;margin-right:7.5%;"/><br/><br/>
				</div>
				
				<div id="cel4">
					<label>Objeto:</label><br/>
					<input type="text" name="nome5" size="50"/><br/><br/>
				</div>
				
				<div id="cel5">
					<label>Quantidade de CASH:</label><br/>
					<input type="text" name="nome6" size="50"/><br/><br/>
				</div>
				
				<div id="cel6">
					<label>Comentários:</label><br/>
					<textarea name="nome7" rows="7" cols="7" style="margin-left:0px;margin-right:0px;width:383px;resize:none;"></textarea>
				</div>
			</div>
		</div>
	</fieldset>
</form>

Espero que vocês me ajudem a achar a luz no final do túnel. E obrigado!

[Rodrigo5468 0]

#EDIT

 

Eu estava olhando agora a pouco no Google e encontrei isso, pelo que eu entendi vou ter que fazer três arquivos CSS. Mobile, Tablet e Desktop, porem como saber se vai ficar certo?

<link rel="stylesheet" type="text/css" href="css/mobile.css" media="all and (max-width:320px)"/>
<link rel="stylesheet" type="text/css" href="css/tablet.css" media="all and (min-width:321px) and (max-width:960px)"/>
<link rel="stylesheet" type="text/css" href="css/desktop.css" media="all and (min-width:961px)"/>

[angelorubin 142]

http://forum.imasters.com.br/topic/538931-site-responsivo/?p=2152746

[Rodrigo5468 0]

Opa!

 

Deu certo, mais uma outra dúvida os media querys, acredito que o meu esta faltando mais, está faltando das outras resoluções e telas.

@media (max-width: 600px) {
	form > div {
	margin: 0 0 15px 0; 
	}
	form > div > label, legend {
	width: 100%;
	float: none;
	margin: 0 0 5px 0;
	}
	form > div > div, form > div > fieldset > div {
	width: 100%;
	float: none;
	}
	input[type=text], input[type=email], input[type=url], input[type=password], input[type=date], textarea, select {
	width: 100%; 
	}
}
@media (min-width: 1200px) {
	form > div > label, legend {
	text-align: right;
	}
}

O meu só tem esses, eu apenas estou editando esse link que você postou http://codepen.io/chriscoyier/pen/DmnlJ