ali@hmadi
شنبه 28 تیر 1393, 13:45 عصر
سلام.
برای ریسپانسیو کردن فرم هایی که فیلدهای زیادی دارن نمونه ای سراغ دارید؟
چون اگه بخواهیم همه به فرض تکست باکس ها رو زیر هم بندازیم در یک ستون فرم خیلی بلند میشه.
مثلاً نمونه ای از یه فرم سه ستونه یا دو ستونه ریسپانسیو سراغ دارید؟
خب چاره ای نیست ...
معمولا کسی چنین ثبت نام هایی رو انجام نمیده با گوشی سطح پایین :)
با تبلت هم که نیازی به این کارا نیست ...
اما کد زیر من پیشنهاد میدم , شما نمی تونید فیلد ها رو حذف کنید و کوچیک کردن فیلد ها هم جالب نیست
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,user-scalable=no">
<title>Responsive Template</title>
<style type="text/css" media="all">
*{
margin: 0;
padding: 0;
}
html{
height: 100%;
}
body{
background: #fcfcfc;
height: 100%;
width: 100%;
}
#block{
width: 990px;
margin: 0 auto;
padding: 20px 0;
}
#header{
background: #0088cc;
height: 150px;
width: 100%;
}
#body{
background: #666;
width: 100%;
}
#sidebar_right{
background: #62c462;
min-height: 500px;
width: 200px;
float: right;
}
#content{
background: #e74f4f;
min-height: 500px;
margin-right: 200px;
}
#footer{
background: #0088cc;
height: 150px;
width: 100%;
}
.clear{
clear: both;
}
.block{
padding: 10px;
}
.block .body{
background: #ff9600;
}
@media only screen and (max-width:990px){
#block{
width: 98%;
}
}
@media only screen and (max-width:400px){
#sidebar_right,#content{
width: 100%;
float: none;
}
}
</style>
</head>
<body>
<div id="block">
<div id="header">Header</div>
<div id="body">
<div id="sidebar_right">Sidebar Right</div>
<div id="content">
<div class="block">
<div class="body">
content contentcontent content content
</div>
</div>
<div class="block">
<div class="body">
content contentcontent content content
</div>
</div>
</div>
<div class="clear"></div>
</div>
<div id="footer">Footer</div>
</div>
</body>
</html>