PDA

View Full Version : سوال: علت کار نکردن کدهای زیر برای responsive بودن چیست؟؟؟


mohammad kafiyan
پنج شنبه 09 بهمن 1393, 00:10 صبح
با سلام به دوستان
من از media query های زیر استفاده میکنم ولی نمی دونم چرا جواب نمی گیریم؟؟؟؟ نمی دونم مشکل کار کجاست؟؟؟؟
می خواهم اگر رزولوشن بین 768 تا 1024 بود دو ستونه شود و اگر رزولوشن بین 480 تا 768 بود تک ستونه و اگر بین 1024 تا 1280 و بیشتر بود سه ستونه و با افزایش رزولوشن Container هم افزایش پیدا کنه


@media only screen (min-width: 480px) and (max-width: 768px) {

div.Container {
width: 90%;
margin: 0 20px;
background:#c3c3c3;
}
#Main .Container #LeftCol {
/*width:25%;*/
/*float:left;*/
/*border:1px solid;*/
margin:5px 0 5px 7px;
float:none;
width:100%;
}
#Main .Container #ContentCol {

width:100%;
float:none;
margin:5px 0 5px 10px;
border:1px solid;
height:500px;
}
#Main .Container #RightCol{
display:none;
}

}
@media only screen and (max-width: 1024px) {

div.Container {
width: 90%;
margin: 0 auto;
background:#c3c3c3;
}
#Main .Container #LeftCol {
width:25%;
float:left;
/*border:1px solid;*/
margin:5px 0 5px 7px;

}
#Main.Container #ContentCol {

width:72%;
float:left;
margin:5px 0 5px 10px;
border:1px solid;
height:500px;
}
#Main .Container #RightCol{
display:none;
/*border:1px solid;*/
}

}
@media only screen (min-width: 1024px) and (max-width: 1280px) {
div.Container {
width: 1240px;
margin: 0 20px;
background:#c3c3c3;
}
#Main .Container #LeftCol {
width:23%;
float:left;
/*border:1px solid;*/
margin:5px 0 5px 7px;

}
#Main .Container #ContentCol {

width:50%;
float:left;
margin:5px 0 5px 10px;
border:1px solid;
height:500px;
}
#Main .Container #RightCol{
width:23%;
float:right;
/*border:1px solid;*/
margin:5px 0 5px 7px;
}

}
mmdsharifi
پنج شنبه 09 بهمن 1393, 09:57 صبح
دمو آنلاین بزارید لطفا!
الان کی میدونه html شما چیه!!؟
mohammad kafiyan
پنج شنبه 09 بهمن 1393, 11:40 صبح
این کدهای CSS


body {

direction:rtl;
text-align:center;
font:16px/16px Tahoma,Sans-Serif,Times New Roman,Helvetica;

}
div.Container {
width:960px;
margin: 0 auto;
overflow:hidden;
border:1px solid;
}
div#Header {
width:100%;
background:#FF6600;
border-bottom:5px solid #a90303;
}
div#Header .Container {
height:200px;

/*background:url("../WebImage/red2-bg.jpg") no-repeat;*/
}
div#TopMenu
{
width:100%;
height:55px;
background:#FFF;
clear:both;
/*border:1px solid;*/
}
div#TopMenu .Container {
}
div#Main
{
width:100%;
height: auto !important;
min-height: 500px;

/*background:url("../WebImage/bg.jpg") repeat;*/
background:url("../WebImage/black-dreams-in-red-website-background.jpg") repeat;
display: block;
clear: both;
content: ".";
}
div#Main .Container {
height:auto;
border-top:1px solid #c3c3c3;
border-bottom:1px solid #c3c3c3;
background:#fff;
padding:10px;
box-shadow: -7px 0 7px -8px inset, 7px 0 7px -8px inset;
/*border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;*/
behavior: url(PIE.htc);
}
div#Main>.Container>div#LeftCol {
width:20%;
float:left;
margin-left:10px;
/*border:1px solid;*/
margin:5px;

}
div#Main>.Container>div#RightCol {
width:20%;
float:right;
margin:5px;
/*border:1px solid;*/
}
div#Main>.Container>div#ContentCol {

width:56%;
float:left;
margin:5px 5px;
border:1px solid;
height:500px;
}
div#Footer
{
width:100%;

clear:both;
/*background:url("../WebImage/Footer1.jpg")no-repeat;*/
background:#333333;
border-top:5px solid #FF6600;
}
div#Footer .Container {
height:200px;
}


این هم کدهای html


<body>
<div id="Header">
<div class="Container">

</div>
</div>
<div id="TopMenu">
<div class="Container">
<div id="TopMenu_L"></div>
<div id="TopMenu_C">
<asp:ContentPlaceHolder ID="Main_Topmenu" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="TopMenu_R">

</div>
</div>
</div>
<div id="Main">
<div class="Container">
<div id="LeftCol">

<div class="BoxWrapper_Title">
<img class="BoxRadius " src="../WebImage/Untitled-1.png" />
<h4>فرم ورود</h4>
<div class="stripe"></div>
</div>
</div>
<div id="ContentCol">
</div>
<div id="RightCol">
<div class="BoxWrapper_Title">
<img class="BoxRadius " src="../WebImage/Untitled-1.png" />
<h4>فرم ورود</h4>
<div class="stripe"></div>
</div>
<div class="BoxWrapper_R radius BoxShadow">
</div>
</div>
</div>
</div>
<div id="Footer"><div class="Container"></div></div>
</body>
mohammad kafiyan
جمعه 10 بهمن 1393, 10:18 صبح
از دوستان کسی نبود کمکی بکند
mmdsharifi
جمعه 10 بهمن 1393, 22:01 عصر
سلام وقت ندارم الان رو کد های اینجا براتون اکی کنم . یه فایل زیپ از پروژتون رو اینجا بزارید
mohammad kafiyan
جمعه 10 بهمن 1393, 22:55 عصر
سلام ، حجم کل پروژه زیاده
من دارم با asp.net کد می زنم و از masterpage دارم استفاده می کنم احتمال داره از اون باشه
به دلیل اینکه با تغییر سایز صفحه width ستونه ها تغییر نمی کنه نمی دونم چرا؟


@media only screen and (max-width: 1024px) {

div.Container {
width: 90%;
margin: 0 auto;
background:#c3c3c3;
}
#Main .Container #LeftCol {
width:25%;
float:left;
/*border:1px solid;*/
margin:5px 0 5px 7px;

}
#Main.Container #ContentCol {

width:72%;
float:left;
margin:5px 0 5px 10px;
border:1px solid;
height:500px;
}
#Main .Container #RightCol{
display:none;
/*border:1px solid;*/
}

}



مثلا اگر سایز صفحه را به 852x768 دو ستونه می شه و ستون راست هم که می خوام مخفی می شه ولی سایز ستون سمت چپ و ستون محتوا (وسط) هیچ تغییری نمی کنه (در سایزها ثابت هستند در واقع از کد css پیش فرض که در بالا قرار دادم داره استفاده می کنم)
جالبه اگر سایز صفحه را به 920x768 تغییر بدهم همان ستون سمت راست دوباره نمایان می شه
مگه در شرط بالا نوشته نشده حداکثر 1024 همان دو ستونه و سایز ستونه چپ با این سایز و ستون محتوا هم با این سایز
واقعا نمی دونم چرا؟؟؟؟؟؟؟؟؟
نکته : تمام تست هام با پلاگین مربوط به firefox هست.
micro_bhk
شنبه 11 بهمن 1393, 16:00 عصر
دوست عزیز این متاتگ رو تو head سایتت اضافه کن و تست کن


<meta name="viewport" content="width=device-width, initial-scale=1.0" />