سوال: کمک درمورد قالب رسپونسیو [بایگانی]

View Full Version : سوال: کمک درمورد قالب رسپونسیو

f_talebi

جمعه 15 آذر 1392, 00:09 صبح

سلام من میخوام یه سایت درست کنم که رسپونسیو باشه ، اینو درست کردم فعلا : http://www.shoosha.xzn.ir/

میخواستم برام کدها رو نگا کنید بنظرتون چطور هستش؟(از نظر رسپونسیو بودن و درست چیدن دایوها ...)
خیلی سوال دارم ولی فعلا همین!
اینم کدها :

<!DOCTYPE html>
<html>
<head>
<title>سایت آموزشی شوشا</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<link rel="SHORTCUT ICON" href="Icon URL">

<script type="text/javascript" src="plusone.js" gapi_processed="true">
{lang: 'fa'}
</script>
</head>
<body>
<div id="container">
<div id="main-menu">
منوی اصلی
<ul id="nav">
<li> menu1 </li>
<li> menu1 </li>
<li> menu1 </li>
<li> menu1 </li>
</ul>
</div>

<div id="right">
راست
</div>

<div id="left">
چپ
</div>

<div id="content">
محتوا
</div>

<div id="footer">
فوتر
</div>

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

کدهای css :

*{
margin:0;
padding:0;}
body{direction:rtl;
}
#container{ margin: auto;
width:95%;
border:1px dashed blue;}

#main-menu{
border:1px dashed pink;
min-height:70px;
}

#nav li{
list-style-type:none;
float:right;
background-color:green;
text-align:center;
width:100px;}

#left{border:1px dashed pink;
width:15%;
float:left;

height:460px;}

#right{border:1px dashed pink;
width:15%;
float:right;

height:460px;}

#content{
border:1px dashed blue;

height:460px;}

#footer{
border:1px solid green;
height:50px;
}

tamafi6

جمعه 15 آذر 1392, 00:30 صبح

درود
صفحه شمارسپانسیو نیست شمابایداز media query استفاده کنیدبعنوان مثال من برای این صفحه ازرسپانسو استفاده کردم
audioplayer (http://css3.host22.com/audioplayer/)
که نمونه اون رامیبینید

@media only screen and ( max-width: 32.5em ) /* 520 */
{
body
{
-webkit-box-shadow: inset 0 0 9.375em rgba( 0, 0, 0, .5 ); /* 150 */
-moz-box-shadow: inset 0 0 9.375em rgba( 0, 0, 0, 5 ); /* 150 */
box-shadow: inset 0 0 9.375em rgba( 0, 0, 0, .5 ); /* 150 */
}
#wrapper
{
width: 100%;
height: auto;
position: static;
padding: 3.125em 1.25em; /* 50 20 */
margin: 0;
}
footer
{
width: 100%;
height: auto;
position: fixed;
left:0px;
top:0px;
padding: 10px;
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
}
footer a
{
background:rgba(0,0,0,0.7);
font-size:100%;
padding:30px 10% 5%;
-webkit-box-shadow: 0 7px 10px #000;
-moz-box-shadow:0 7px 10px #000 ;
box-shadow: 0 7px 10px #000;
-webkit-border-radius:0 0 10px 10px;
-moz-border-radius:0 0 10px 10px;
border-radius:0 0 10px 10px;
}
}
این کدبرای تلفن های لمسی نوشته شده برای امتهان میتونیدباگوشی تست کنیدویاسایزمرورگرراتغییرب دیداین تایپک راببینید
http://barnamenevis.org/showthread.php?392901-%E2%80%8F%E2%80%8E(%E2%80%8E%E2%80%8Eresponsive)%E 2%80%8EMedia-query%D9%87%D8%A7

f_talebi

پنج شنبه 21 آذر 1392, 11:36 صبح

این چطوره بنظر شما http://shoosha.hostraygan.com/

omidabedi

پنج شنبه 21 آذر 1392, 15:14 عصر

درود
صفحه شمارسپانسیو نیست شمابایداز media query استفاده کنیدبعنوان مثال من برای این صفحه ازرسپانسو استفاده کردم

نه حتما لازم نیست از media query استفاده بشه.
media کوئری مثل if میمونه اما خب قبل از خلق css3 هم بحث ریسپانسیو مطرح بود اما نه به شدت الان.
برای ریسپانسیو ساده ترین راهش استفاده از اندازه ها بصورت درصد هست.
مهم اینه که وقتی صفحه رو کوچک و بزرگ میکنیم بهم نریزه که سایت ایشون این قابلیت رو داره.
فعلا پایه هست و خوب خوبه در این حد.

tamafi6

پنج شنبه 21 آذر 1392, 15:31 عصر

این چطوره بنظر شما http://shoosha.hostraygan.com/

بهترشد.منوها هم بایدتغییرکنه.

tamafi6

پنج شنبه 21 آذر 1392, 15:39 عصر

نه حتما لازم نیست از media query استفاده بشه.
media کوئری مثل if میمونه اما خب قبل از خلق css3 هم بحث ریسپانسیو مطرح بود اما نه به شدت الان.
برای ریسپانسیو ساده ترین راهش استفاده از اندازه ها بصورت درصد هست.
مهم اینه که وقتی صفحه رو کوچک و بزرگ میکنیم بهم نریزه که سایت ایشون این قابلیت رو داره.
فعلا پایه هست و خوب خوبه در این حد.
دوست عزیزفکرنکنم بااضافه کردن % به مقدارعناصروالمانهای صفحه گفت که یک صفحه رسپانسیو داریم حالااونجایی که مقدارما % قبول نمیکنه تکلیف چی هست رسپانسیو برای پنل های دیگرابزاربه کارمیره نه فقط طول وعرض مرورگررا تغییربدیم بگیم صفحه رسپانسیو هست مثال برای منو های ساخته شده چطورمیشه ازدرصداستفاده کرد؟ویانوشته ای بافونت بزرگ راچطورباید % داد؟ box ی که داخلش چندین لینک وجودداره تکلیفش چی هست ؟

azamicu

پنج شنبه 21 آذر 1392, 17:42 عصر

باسلام
یه توضیح کوچیک درباره رسپانسیو
روش اول استفاده از مدیا کوئری هاست اما مشکلش اینه که بعضی مرور گرها و مدیاها ساپرتش نمیکنن
روش دوم استفاده از درصد و کمی جاوا اسکریپت هستش که باید با سایز صفحه و رخداد های جاوا اسکرسپت مثل resize کار بکنید یکم سخت تره ولی دیگه مشکل جواب ندادن و درست کارکردن تو همه جا رو نداره و سایت های رسپانسیو فوق حرفه ای از روش دوم استفاده میکنند
مثلا تا عرض 900 با درصد و از اون به بعد با جی کوئری
امید وارم موفق باشید

omidabedi

پنج شنبه 21 آذر 1392, 18:20 عصر

دوست عزیزفکرنکنم بااضافه کردن % به مقدارعناصروالمانهای صفحه گفت که یک صفحه رسپانسیو داریم حالااونجایی که مقدارما % قبول نمیکنه تکلیف چی هست رسپانسیو برای پنل های دیگرابزاربه کارمیره نه فقط طول وعرض مرورگررا تغییربدیم بگیم صفحه رسپانسیو هست مثال برای منو های ساخته شده چطورمیشه ازدرصداستفاده کرد؟ویانوشته ای بافونت بزرگ راچطورباید % داد؟ box ی که داخلش چندین لینک وجودداره تکلیفش چی هست ؟

دوست عزیز من نگفتم راه قطعیش اینه و بدون مشکل هست
اما روش پایه ای همینه
اگر این راه بدون نقض بود که دیگه مدیا کوئری خلق نمیشد.
برای دوستمون هم بهتر ابتدا از همین راه یاد بگیره و کم کم بیاد بالا
هر کسی هم برای خودش سبک و ترفند های گوناگونی داره برای طراحی ;)

f_talebi

پنج شنبه 21 آذر 1392, 18:25 عصر

بهترشد.منوها هم بایدتغییرکنه.
میشه بگین چه تغییراتی

من زیاد از مدیا کوئری سر درنمیارم! نمیدونم چجوری برای این سایت بنویسم

refugee

پنج شنبه 21 آذر 1392, 18:50 عصر

میشه بگین چه تغییراتی

من زیاد از مدیا کوئری سر درنمیارم! نمیدونم چجوری برای این سایت بنویسم

کافیست تو یک صفحه جدا و یا اهمون صفحه استایل هایتان اول کد ها اینو بنویسید و مطابق با میل خود به اندازه دیوایس های مورد نظرتون درست کنید . ( برای دسکتاپ 980 پیکسل , تبلت 768 پیکسل و برای موبایل 480 و 320 پیکسل )

@media only screen and (width:768px) {

/* mahal gharar giri style haye mored nazar */

}

f_talebi

پنج شنبه 21 آذر 1392, 19:14 عصر

کافیست تو یک صفحه جدا و یا اهمون صفحه استایل هایتان اول کد ها اینو بنویسید و مطابق با میل خود به اندازه دیوایس های مورد نظرتون درست کنید . ( برای دسکتاپ 980 پیکسل , تبلت 768 پیکسل و برای موبایل 480 و 320 پیکسل )

@media only screen and (width:768px) {

/* mahal gharar giri style haye mored nazar */

}

مرسی. اینو میدونم ولی اینکه اون تو ، چی بنویسم مشکلمه! یعنی باید با آزمون و خطا بدست بیارم که کدوم div اندازش چقد بشه توی فلان رزولوشن ... . درسته؟ خیلی سخته که!

refugee

پنج شنبه 21 آذر 1392, 19:22 عصر

مرسی. اینو میدونم ولی اینکه اون تو ، چی بنویسم مشکلمه! یعنی باید با آزمون و خطا بدست بیارم که کدوم div اندازش چقد بشه توی فلان رزولوشن ... . درسته؟ خیلی سخته که!

نه , اون تو دقیقا استایل هایی رو مینویسی که برای قالب اصلی (بدون ریسپانسیو ) نوشتی .
یعنی چی ؟

بطور مثال ما تو قالب اصلی این کلاس رو داریم .

.content {
margin:0px auto;
width:980px;
background:#333;
}

خب حالا کافیست تا برای ریسپانسیو کردن و این کلاس رو داخل کوئری مون قرار بدیم .

@media only screen and (max-width:768px) and (min-width:481px) {
{
margin:0px auto;
width:80%;
background:#333;
}
}

فقط بجای 980px ما برابر 80% صفحه دیوایس قرار دادیم . همین

omidabedi

پنج شنبه 21 آذر 1392, 19:38 عصر

میشه بگین چه تغییراتی

من زیاد از مدیا کوئری سر درنمیارم! نمیدونم چجوری برای این سایت بنویسم

این سایت رو ببینید منو هاشو
اگر خواستید کد جاوااسکریپتش رو میزارم ام بهتره فعلا رو همین ابتدایی ها تمرکز کنید تا کامل دستتون بیاد
http://shiraz-web.ir
صفحه رو کوچک کنید

omidabedi

پنج شنبه 21 آذر 1392, 20:40 عصر

اینم کدش

(function($){
$.fn.sfsmallscreen = function(options){
options = $.extend({
mode: 'inactive',
breakpoint: 768,
useragent: '',
title: '',
addSelected: true,
menuClasses: true,
hyperlinkClasses: true,
excludeClass_menu: '',
excludeClass_hyperlink: '',
includeClass_menu: '',
includeClass_hyperlink: ''
}, options);

// We need to clean up the menu from anything unnecessary.
function refine(menu){
if ($('.sf-megamenu', menu).length > 0){
var refined = menu.clone();
refined.find('div.sf-megamenu-column > ol').each(function(){
$(this).replaceWith('<ul>' + $(this).html() + '</ul>');
});
refined.find('div.sf-megamenu-column').each(function(){
$(this).replaceWith($(this).html());
}).end().find('.sf-megamenu-wrapper > ol').each(function(){
$(this).replaceWith($(this).html());
}).end().find('li.sf-megamenu-wrapper').each(function(){
$(this).replaceWith($(this).html());
});
} else {
var refined = menu.clone();
}
refined.find('.sf-smallscreen-remove').each(function(){
$(this).replaceWith($(this).html());
}).end().find('.sf-sub-indicator, .sf-description').each(function(){
$(this).remove();
});
return refined;
}

// Currently the only available reaction is converting the menu into a <select> element;
// In the next version there will be another reaction that will create a "compact" version of
// the menu, using <ul> element hence easy to style with CSS and so on and so forth.
function toSelect(menu, level){
var items = '';
$(menu).children('li').each(function(){
var list = $(this);
list.children('a, span').each(function(){
var item = $(this),
path = item.is('a') ? item.attr('href') : '',
itemClone = item.clone(),
classes = (options.hyperlinkClasses) ? ((options.excludeClass_hyperlink && itemClone.hasClass(options.excludeClass_hyperlink) ) ? itemClone.removeClass(options.excludeClass_hyperli nk).attr('class') : itemClone.attr('class')) : '',
classes = (options.includeClass_hyperlink && !itemClone.hasClass(options.includeClass_hyperlink )) ? ((options.hyperlinkClasses) ? itemClone.addClass(options.includeClass_hyperlink) .attr('class') : options.includeClass_hyperlink) : classes,
classes = (classes) ? ' class="' + classes + '"' : '',
disable = item.is('span') ? ' disabled="disabled"' : '',
subIndicator = 1 < level ? Array(level).join('-') + ' ' : '';
items += '<option value="' + path + '"' + classes + disable + '>' + subIndicator + $.trim(item.text()) +'</option>';
list.find('> ul').each(function(){
items += toSelect(this, level + 1);
});
});
});
return items;
}

// Create the new version, hide the original.
function convert(menu){
var menuClone = menu.clone(), classes = (options.menuClasses) ? ((options.excludeClass_menu && menuClone.hasClass(options.excludeClass_menu)) ? menuClone.removeClass(options.excludeClass_menu).a ttr('class') : menuClone.attr('class')) : '',
classes = (options.includeClass_menu && !menuClone.hasClass(options.includeClass_menu)) ? ((options.menuClasses) ? menuClone.addClass(options.includeClass_menu).attr ('class') : options.includeClass_menu) : classes,
classes = (classes) ? ' class="' + classes + '"' : '';
if ($('#' + menu.attr('id') + '-select').length == 0){
var selectList = $('<select' + classes + ' id="' + menu.attr('id') + '-select"/>'),
refinedMenu = refine(menu);
newMenu = toSelect(refinedMenu, 1);
selectList.append('<option>' + options.title + '</option>').append(newMenu).change(function(){
window.location = selectList.val();
});
if (options.addSelected) {
selectList.find('.active').attr("selected", !0);
}
menu.before(selectList).hide();
}
}

// Turn everything back to normal.
function turnBack(menu){
var id = '#' + menu.attr('id');
$(id + '-select').remove();
$(id).show();
}

// Return original object to support chaining.
return this.each(function(){
var menu = $(this),
mode = options.mode;
// The rest is crystal clear, isn't it? :)
switch (mode){
case 'always_active' :
convert(menu);
break;
case 'window_width' :
if ($(window).width() < options.breakpoint){
convert(menu);
}
var timer;
$(window).resize(function(){
clearTimeout(timer);
timer = setTimeout(function(){
if ($(window).width() < options.breakpoint){
convert(menu);
}
else {
turnBack(menu);
}
}, 100);
});
break;
case 'useragent_custom' :
if (options.useragent != ''){
var ua = RegExp(options.useragent, 'i');
if (navigator.userAgent.match(ua)){
convert(menu);
}
}
break;
case 'useragent_predefined' :
if (navigator.userAgent.match(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iem obile|ip(hone|od|ad)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\. (browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i)){
convert(menu);
}
break;
}
});
};
})(jQuery);

omidabedi

پنج شنبه 21 آذر 1392, 21:12 عصر

اما خب این خیلی پیچیدست و داینامیک چون برای cms هست شما میتونید بسته به نیاز خودتون خیلی ساده تر این کارو انجام بدید
چون منو ها drop down هستند یکم کد حذفش طولانی شده و گیج کننده
اما خب بد نیست با کلیت کار اشنا بشید

حمید . ه

جمعه 22 آذر 1392, 16:12 عصر

برای طراحی واکنش گرا شما در 99% مواقع نیازی به هیچ کد جاوا اسکریپتی ندارید و تنها با تسلط بر روی css میتونید یک قالب واکنش گرا داشته باشید
به نظر من شما هنوز مفهوم طراحی واکنش گرا رو متوجه نشدید و به همین خاطر هست که مشکل دارید بعضی جاها
به نظرم این مقاله میتونه خیلی بهتون کمک کنه http://sallar.me/1392/07/11/using-em-and-rem-units-for-web-design/

tamafi6

جمعه 22 آذر 1392, 21:27 عصر

اینجاراببینید
http://barnamenevis.org/showthread.php?431767-jquery-%D9%88%D8%B5%D9%81%D8%AD%D8%A7%D8%AA-%D9%88%D8%A7%DA%A9%D9%86%D8%B4-%DA%AF%D8%B1%D8%A7-(%D8%B1%D8%B3%D9%BE%D8%A7%D9%86%D8%B3%DB%8C%D9%88)