Preciso alterar uma renderização, para mostrar uma caixa de seleção caso a resolução do dispositivo seja menor que X
exemplo: mostrar radio's buttons e caso a resolução da tela for menor que X ele vira um select
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeVocê pode usar a solução de ocultar o conteúdo usando o display:block
e display:none
, para isso utilize as condicionais de css max-width
.
Segue exemplo:
CSS:
* { -ie-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
body{ background: #EEE;}
.box_form { width: 800px; margin:50px auto; max-width: 100%; background: #FFF; box-shadow: rgba(0,0,0,0.5) 0 0 10px; padding: 30px;}
select, label { padding: 10px;}
.desktop { display: block;}
.mobile { display: none;}
@media(max-width:480px){
.desktop { display: none;}
.mobile { display: block;}
}
HTML:
<meta content="width=device-width, initial-scale=1" name="viewport">
<div class="box_form">
<form action="">
<div class="desktop">
<input type="radio" id="resp1" value="1" name="pergunta1">
<label for="resp1">Alternativa 1</label>
<input type="radio" id="resp2" value="2" name="pergunta1">
<label for="resp2">Alternativa 2</label>
</div>
<div class="mobile">
<select name="pergunta1" id="pergunta1">
<option value="">Alternativa 1</option>
<option value="">Alternativa 2</option>
</select>
</div>
</form>
</div>
display: block;
edisplay: none;