max-width تو ریسپانسیو کردن [بایگانی]

jamejam123

چهارشنبه 21 اسفند 1392, 23:33 عصر

سلام
سوال اول
به این کد یه نگا بندازین

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>one</title>
<style type="text/css">
body{
margin:0px;
padding:0px;
}
#all{
margin:auto;
max-width:1100px;
width:100%;
background:#CCC;
height:400px;
}
.one{
float:right;
max-width:350px;
width:100%;
height:400px;
background:#369;
}
.two{
float:right;
max-width:350px;
width:100%;
height:400px;
background:#FC0;
}
.three{
float:right;
max-width:350px;
width:100%;
height:400px;
background:#C69;
}
</style>
</head>
<body>

<div id="all">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>

</div>
</body>
</html>

من تو اینجا وقتی سایز مرورگر رو کم می کنم به جای اینکه سایز دایو های one two three کم بشه یکی از آنها به پایین منطقل میشه.
مشکل از کجاست.

و سوال دوم
به این تصویر یه نگا بندازید
http://s5.picofile.com/file/8116623100/JSBach_Transition.png
من می خوام یه چنین دایوی درست کنم که از دو رو تشکیل شده باشه و وقتی که ماس رفت روی اون ، با انیمیشنی که تو تصویر هستش به دایو بعدی تبدیل شه
بی نهایت ممنون

Mandana Ms

پنج شنبه 22 اسفند 1392, 00:13 صبح

سلام
سوال اول
به این کد یه نگا بندازین

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>one</title>
<style type="text/css">
body{
margin:0px;
padding:0px;
}
#all{
margin:auto;
max-width:1100px;
width:100%;
background:#CCC;
height:400px;
}
.one{
float:right;
max-width:350px;
width:100%;
height:400px;
background:#369;
}
.two{
float:right;
max-width:350px;
width:100%;
height:400px;
background:#FC0;
}
.three{
float:right;
max-width:350px;
width:100%;
height:400px;
background:#C69;
}
</style>
</head>
<body>

<div id="all">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>

</div>
</body>
</html>

من تو اینجا وقتی سایز مرورگر رو کم می کنم به جای اینکه سایز دایو های one two three کم بشه یکی از آنها به پایین منطقل میشه.
مشکل از کجاست.

و سوال دوم
به این تصویر یه نگا بندازید
http://s5.picofile.com/file/8116623100/JSBach_Transition.png
من می خوام یه چنین دایوی درست کنم که از دو رو تشکیل شده باشه و وقتی که ماس رفت روی اون ، با انیمیشنی که تو تصویر هستش به دایو بعدی تبدیل شه
بی نهایت ممنون

سلام من به max-width درصد که میدم درست میشه اون سایزی که میخوای دیو اون اندازه باشه به درصد بزن اون وقت مرورگر رو کوچیک کنی ریزش به پایین نمیکنه و همه به یک اندازه عرضشون کم میشه شما عرض رو 100% گرفتی این دیو ها مثل لایه هستند وقتی مرورگر کوچیک میشه دیو ها به پایین میلغزند من که ماکس رو درصد دادم کار درست شد اگر نه که دوستان واردترند شاید بهتون کمک کنن.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>one</title>
<style type="text/css">
body{
margin:0px;
padding:0px;
}
#all{
margin:auto;
max-width:1100px;
width:100%;
background:#CCC;
height:400px;
}
.one{
float:right;
max-width:40%;
width:100%;
height:400px;
background:#369;
}
.two{
float:right;
max-width:30%;
width:100%;
height:400px;
background:#FC0;
}
.three{
float:right;
max-width:20%;
width:100%;
height:400px;
background:#C69;
}
</style>
</head>
<body>

<div id="all">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>

</div>
</body>
</html>

tux-world

پنج شنبه 22 اسفند 1392, 09:32 صبح

کلا کاری که شما دارید الان میکنید اشتباهه دوست من. شما باید از viewport تو html استفاده کنید. شما نمیتونین تمام سایزها رو تشخیص بدید.

http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
http://html5hacks.com/blog/2012/11/28/elegantly-resize-your-page-with-the-at-viewport-css-declaration/
http://blog.teamtreehouse.com/thinking-ahead-css-device-adaptation-with-viewport

jamejam123

پنج شنبه 22 اسفند 1392, 10:12 صبح

تشکر فراوان از شما دوست عزیز
من انگلیسیم خوب نیست
میشه یه چند خط توضیح فارسی بدین
بی نهایت ممنون

jamejam123

جمعه 23 اسفند 1392, 14:02 عصر

سلام
من این کاری رو که دوستان میگفتن رو انجام دادم
ولی چیزی یاد نگرفتم
به این کد من یه نگابندازید
من نتیجه ای ندیدم

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>one</title>
<style type="text/css">
body{
margin:0px;
padding:0px;
}
#all{
margin:auto;
max-width:1100px;
width:100%;
background:#CCC;
height:400px;
}
.one{
float:right;
max-width:350px;
width:100%;
height:400px;
background:#369;
}
.two{
float:right;
max-width:350px;
width:100%;
height:400px;
background:#FC0;
}
.three{
float:right;
max-width:350px;
width:100%;
height:400px;
background:#C69;
}

@media only screen and (max-width:800px){
@viewport {
width: 800px;
width: device-width;
max-zoom: 3;
min-zoom: 0.50;

}

#all{
background:#333;
}

}

</style>
</head>
<body>

<div id="all">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>

</div>
</body>
</html>

jamejam123

جمعه 23 اسفند 1392, 14:16 عصر

ببخشین
میشه یه کوچولو راهنمایی بکنین

adminmftq

جمعه 23 اسفند 1392, 14:35 عصر

فکر کنم با اصلاح کد زیر مشکلت حل شه
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>one</title>
<style type="text/css">
body{
margin:0px;
padding:0px;
}
#all{
margin:auto;
max-width:1100px;
width:100%;
background:#CCC;
height:400px;
}
.one{
float:right;
max-width:33%;
width:100%;
height:400px;
background:#369;
}
.two{
float:right;
max-width:33%;
width:100%;
height:400px;
background:#FC0;
}
.three{
float:right;
max-width:33%;
width:100%;
height:400px;
background:#C69;
}
</style>
</head>
<body>

<div id="all">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>

</div>
</body>
</html>