JSFiddle - React, Tailwind, and code Playground
HTML
'<div class="block1" align="center"'||
'<input type="hidden" name="p_sel" value="X">'
'Список:'
'<br></div>'
'<div class="block2" align="center">'
'<input type="radio" class="radioBtn" style="width:200px; height:200px;"name="sel" id="sel_name" checked>'
'<input type="radio" class="radioBtn" style="width:100px; height:100px;"name="sel" id="sel_adr"></div>'
CSS
.block1 {
width: 100%;
height: 100%;
}
.block2 {
width: 100%;
height: 100%;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 359px){
.block1 {
//padding: 5px;
float: center;
font-size: 100px;
background: #ffc;
}
.block2 {
font-size: 100px;
float: center;
height: 500px;
width: 1280px;
}
.radioBtn {
width: 250px;
height: 250px;
}
.selScl {
width : 750px;
height : 100px;
font-size : 50px;
background : #fff;
}
.inpName {
width : 600px;
height : 100px;
font-size : 70px;
}
.inpLun {
width : 150px;
height : 100px;
font-size : 70px;
}
.inp {
width : 750px;
height :100px;
font-size: 70px;
}
.sclAdr {
width : 600px;
height : 100px;
font-size : 70px;
}
.sclLun {
width : 150px;
height : 100px;
font-size : 70px;
}
.weightInput {
margin-top:40px;
width :400px;
height:150px;
background: #ffc;
font: 70px ArialBlack;
text-align :center;
}
.weightBtn {
width :400px;
height: 150px;
background: #f92;
margin-top:30px;
font-size: 65px;
}
.informNb {
font-size:30px;
}
select, .inp {
height : 100px;
font : 50px Arial;
background : #fff;
}
select:disabled, .inp:disabled {
background: #fff;
}
}
@media only screen and (min-device-width: 360px){
.block1 {
width: 360px;
height: 640px;
//padding: 5px;
float: center;
background: #ccc;
}
}
@media only screen and (min-device-width: 1024px){
.block1 {
font-size: 100px;
width: 1280px;
height: 1024px;
//padding: 5px;
float: center;
background: #000;
}
}