چه شکلی سایتمان را ریسپانسیو کنیم و نسخه موبایل براش درست کنیم
سفارش تبليغات در انجــمن قالب گراف ورود به تاپيک اطلاعيه هاي تابستانه قالب گراف
امور گرافيکي و کدنويسي وب خود را به جي جي ميزبان بسپاريد
نام کاربري : پسورد : فراموش
چه شکلی سایتمان را ریسپانسیو کنیم و نسخه موبایل براش درست کنیم

خیلی تو اینترنت گشتم ولی مطالبش به ترتیب نبود که یاد بگیرم.

به عنوان مثال من می خواهم سایت masjedpanahi.ir را ریسپانسیو کنم چیکار باید بکنم.
کجاهاش را تغییر بدهم
پاسخ ها
سلام رفیق

واکنش کردن قالب کار خاصی نداره

ابتدا متاتگ زیر رو قبل از بین هد قالبت بزار

کد:

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


بعدش باید توی فایل css اندازه هایی که میخوای قالبت تو اون واکنش گرا بشه رو مشخص کنی

کد:

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


اندازه 700 سه اندازه مهم 320 ، 360 ، 400 پیکسل رو پوشش میده

برای دیگر اندازه ها هم کافیه توی مرورگر فایرفاکس کلید های ترکیبی Ctrl + Shift + M رو بزنی

اما چه چیزی رو باید واکنش گرا کنی

ببین اگه هدر و قالب 100% باشه نیازی به واکنش گرایی نیست اگه نه که باید واکنش گرا بشه باید کلاس هدر ، فوتر ، باکس کل صفحه ، کلاس سمت راست ، وسط و چپ رو توی همون کد بالا بنویسی و بهش اندازه 98% درصد بدی اگه هم مساوی نبود میتونی با مارجین مساوی کنی

یه نکته ای دیگه اگه میخوای یه باکسی هم نباشه کافیه display رو روی none تنظیم کنی

واکنش گرا زیاد چیز سختی نیست البته اگه کدنویس باشید در غیر این صورت به یک کدنویس بگید براتون انجام بده

من واقعا وقتشو ندارم وگرنه براتون انجام میدادم موفق باشید
امضاي کاربر :

تشکر شده:

2 کاربر از 4hossein7 به خاطر اين مطلب مفيد تشکر کرده اند: ahmadreza9001 / fada /

نقل قول از 4hossein7
سلام رفیق

واکنش کردن قالب کار خاصی نداره

ابتدا متاتگ زیر رو قبل از بین هد قالبت بزار

کد:

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


بعدش باید توی فایل css اندازه هایی که میخوای قالبت تو اون واکنش گرا بشه رو مشخص کنی

کد:

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


اندازه 700 سه اندازه مهم 320 ، 360 ، 400 پیکسل رو پوشش میده

برای دیگر اندازه ها هم کافیه توی مرورگر فایرفاکس کلید های ترکیبی Ctrl + Shift + M رو بزنی

اما چه چیزی رو باید واکنش گرا کنی

ببین اگه هدر و قالب 100% باشه نیازی به واکنش گرایی نیست اگه نه که باید واکنش گرا بشه باید کلاس هدر ، فوتر ، باکس کل صفحه ، کلاس سمت راست ، وسط و چپ رو توی همون کد بالا بنویسی و بهش اندازه 98% درصد بدی اگه هم مساوی نبود میتونی با مارجین مساوی کنی

یه نکته ای دیگه اگه میخوای یه باکسی هم نباشه کافیه display رو روی none تنظیم کنی

واکنش گرا زیاد چیز سختی نیست البته اگه کدنویس باشید در غیر این صورت به یک کدنویس بگید براتون انجام بده

من واقعا وقتشو ندارم وگرنه براتون انجام میدادم موفق باشید

متا تگ را قبل از head بگزارم یا بین تگ head متوجه نشدم..

خدا خیرت بده یک فیلم آموزشی از واکنش گرا کردن قالب درست کن.برا خودت هم یک نوع تبلیغه.
تو اینترنت هر چی گشتم چیزی که از اول توضیح بده و اخرش هم کامل باشه پیدا نکردم
نقل قول از pese
نقل قول از 4hossein7
سلام رفیق

واکنش کردن قالب کار خاصی نداره

ابتدا متاتگ زیر رو قبل از بین هد قالبت بزار

کد:



بعدش باید توی فایل css اندازه هایی که میخوای قالبت تو اون واکنش گرا بشه رو مشخص کنی

کد:



اندازه 700 سه اندازه مهم 320 ، 360 ، 400 پیکسل رو پوشش میده

برای دیگر اندازه ها هم کافیه توی مرورگر فایرفاکس کلید های ترکیبی Ctrl + Shift + M رو بزنی

اما چه چیزی رو باید واکنش گرا کنی

ببین اگه هدر و قالب 100% باشه نیازی به واکنش گرایی نیست اگه نه که باید واکنش گرا بشه باید کلاس هدر ، فوتر ، باکس کل صفحه ، کلاس سمت راست ، وسط و چپ رو توی همون کد بالا بنویسی و بهش اندازه 98% درصد بدی اگه هم مساوی نبود میتونی با مارجین مساوی کنی

یه نکته ای دیگه اگه میخوای یه باکسی هم نباشه کافیه display رو روی none تنظیم کنی

واکنش گرا زیاد چیز سختی نیست البته اگه کدنویس باشید در غیر این صورت به یک کدنویس بگید براتون انجام بده

من واقعا وقتشو ندارم وگرنه براتون انجام میدادم موفق باشید

متا تگ را قبل از head بگزارم یا بین تگ head متوجه نشدم..

خدا خیرت بده یک فیلم آموزشی از واکنش گرا کردن قالب درست کن.برا خودت هم یک نوع تبلیغه.
تو اینترنت هر چی گشتم چیزی که از اول توضیح بده و اخرش هم کامل باشه پیدا نکردم




بینش رو قرار بده

کد:


امضاي کاربر :

من الان تو قالبم فایل Style_2.css را باز کردم کد های زیر درونش هست حالا باید چه چیزی را تغییر بدهم.
کد:
/*
Theme Name: hashilan
Theme URI: http://www.hashilan.com
Translated by Rozex.rozblog.com
Translaterer: Reza
Translated URI: http://Rozex.rozblog.com
Description: هر گونه پاک کردن لینک و بنر به شدت پیگیری خواهد شد
Email: Rozex.rozblog@gmail.com
*/
/* Reset & Main */
* { margin:0 auto; padding:0; border:0; }
body { background:#f2f2f2; direction:rtl; font:12px/20px tahoma; color:#555; }
input,textarea { background:#ddd; border:1px dashed rgba(0,0,0,.1); padding:5px; font:12px tahoma; color:#555; }
input:focus,textarea:focus { background:#e9e9e9; }
input[type=submit] { background:#7ac142; color:#fff; cursor:pointer; }
input[type=submit]:hover { background:#555; }
li { list-style:inside url(https://rozblog.com/temp/rozex/hashilan/li.png); }
a { text-decoration:none; color:#555; outline:0; transition:all .3s; }
a:hover { color:#7ac142; }
main { width:1000px; display: block }
.clr { clear:both; }
.block td{font:10pt tahoma;}
.block{font:10pt tahoma;}

/* All */
/* Border Radius */ input,textarea,#search,.ads-120,#ads-text a,footer,#rozex,.buy,#pages,.page-numbers,#search-result,.avatar-45,#similar { border-radius:5px; }
/* Border Ra Top */ #nav,aside h5,.title,.cm-content,.reply { border-radius:5px 5px 0 0; }
/* Border Bottom */ #top,#ads-468,.block,.part:last-child,.custom-ul li:last-child,.metadata { border-radius:0 0 5px 5px; }
/* Font WD Two L */ h1,h2,h3,h4,h5,h6,#search-input,#ads-text a,#rozex,.readmore,#pages { font:17px A Google; }
#search,#ads-468,.block { background:#fafafa; border:1px solid #e3e3e3; padding:5px; box-shadow:2px 2px 3px rgba(233,233,233,.7),inset 7px 7px 5px rgba(221,221,221,.2); }

/* Icons */
[class^=icon-],[id^=icon-] { background-image:url(https://rozblog.com/temp/rozex/hashilan/sprite.png) !important; width:16px; height:16px; margin:6px 0 0 5px; display:inline-block; float:right; }
#icon-search { background-color:transparent; width:32px; height:32px; float:left; }
.icon-sticky { background-position:0 -58px; }
.icon-post { background-position:0 -37px; width:10px; }
.icon-block { background-position:0 -79px; }
.icon-author { background-position:0 -100px; }
.icon-view { background-position:-20px -37px; margin-top:4px; }
.icon-date { background-position:0 -142px; }
.icon-comment { background-position:0 -121px; }
.icon-bottom { background-position:-20px -58px; }
#icon-copyright { background-position:-20px -79px; margin-top:2px; }
#icon-google { background-position:-20px -100px; }
#icon-facebook { background-position:-20px -121px; }
#icon-twitter { background-position:-20px -142px; }
#icon-rss { background-position:0 -163px; }
#icon-sitemap { background-position:-20px -163px; }
#icon-category { background-position:0 -185px; }

/* Header */
#top { background:url(https://rozblog.com/temp/rozex/hashilan/bg1.png); height:15px; margin-bottom:20px; }
#logo { font-size:30px; color:#7ac142; float:right; }
#desc { background:#fff; max-width:300px; margin:15px 25px; padding:0 3px; color:#aaa; float:right; }
#desc:before { content:""; border:10px solid transparent; border-left-color:#fff; border-right:0; position:absolute; margin-right:-13px; }
#search { margin-bottom:20px; padding:5px; float:left; }
#search input { border:0; }
#search-input { background:transparent; width:320px; padding:5px; font-size:20px; color:#888; }
#date { text-align:left; font-size:11px; }
#date span { color:#c33; }
#nav { background:url(https://rozblog.com/temp/rozex/hashilan/bg1.png); height:40px; }
#nav a { color:#fff; margin-right:10px; padding:10px 5px; display:inline-block; }
#nav a:hover { background:#7ac142; }
#ads-468 { border-top:0; margin-bottom:20px; }
#ads-468 img { margin:4px 13px 0 0; }

/* Sidebar */
#right-side { width:150px; margin-left:10px; float:right; }
#left-side { width:250px; float:left; }
aside { margin-bottom:10px; }
aside h5 { background:url(https://rozblog.com/temp/rozex/hashilan/bg1.png); padding:7px; height:30px; color:#fff; box-shadow:inset 0 0 10px rgba(0,0,0,.3); }
#left-side .ads-120 { padding-bottom:0; }
.ads-120 { background:#7ac142; padding:5px 0; text-align:center; }
.ads-120 img { margin-top:5px; }
.ads-120 a { color:#fff; }
.block { border-top:0; padding:0; }
.block li { border-bottom:1px solid #f0f0f0; padding:5px; }
.block li:last-child { border:0; }
#menu li { background:url(https://rozblog.com/temp/rozex/hashilan/left-arrow.png) 7px no-repeat; }
#menu li:hover { background:#eee; }
#menu li ul { display:none; }
#menu li ul a { color:#fff; }
#menu li:hover ul { background:#555; width:150px; margin:-25px 143px 0 0; display:block; position:absolute; border-radius:5px 0 0 5px; }
#menu li ul li { background:none; border-bottom-color:#707070; }
#menu li ul li:first-child { border-radius:5px 0 0; }
#menu li ul li:last-child { border-radius:0 0 0 5px; }
#menu li ul li:hover { background:#7ac142; color:#555; list-style:inside disc; }
.part { height:44px; border-bottom:1px solid #ddd; padding:10px 5px; font:11px tahoma; }
.part:hover { background:#7ac142; }
.part:hover a { color:#fff; }
.part:last-child { border:0; margin:0; }
.part img { margin-left:5px; float:right; }
.attachment-hashilan { width:70px; height:40px; border:1px solid #ddd; padding:1px; }
.custom-ul li:hover { background:#7ac142 url(https://rozblog.com/temp/rozex/hashilan/li2.png) 233px center no-repeat; padding-right:20px; list-style:none; }
.custom-ul li:hover a { color:#fff; }
#ads-text a { background:url(https://rozblog.com/temp/rozex/hashilan/bg2.png); height:38px; margin-bottom:10px; padding-top:10px; text-align:center; color:#fff; display:block; border:1px solid #579e1f; }
#ads-text a:hover { background:url(https://rozblog.com/temp/rozex/hashilan/bg1.png); border-color:#000; }
.onlines{direction:ltr;text-align:left;margin-left:1px;}
.marign{padding:0 3px 0;}

/* Center */
#center { width:580px; float:right; }
article { margin-bottom:10px; }
article img { max-width:560px; }
article .block { padding:10px; }
.aligncenter,.sticky img { margin:5px auto; display:block; }
.sticky .title { background:url(https://rozblog.com/temp/rozex/hashilan/bg2.png); }
.buy { background:#c33; width:200px; margin:5px auto; padding:5px; text-align:center; color:#fff; display:block; }
.buy:hover { background:#7ac142; color:#fff; }
.title { background:url(https://rozblog.com/temp/rozex/hashilan/bg1.png); height:28px; padding:7px; color:#fff; }
.title a { color:#fff; }
.title a:hover { color:#7ac142; }
.post .block { border-radius:0; }
.metadata { background:#e8e8e8; height:20px; padding:3px; overflow:hidden; box-shadow:inset -1px -1px 0 #e0e0e0; }
.readmore { background:#7ac142 url(https://rozblog.com/temp/rozex/hashilan/li2.png) no-repeat 125px; margin:-4px 0 0 0 20px; padding:1px 30px 1px 5px; font-size:15px; color:#fff; float:left; border-radius:0 0 0 5px; }
.readmore:hover { background-color:#555; }
.metadata div { margin-left:20px; float:right; }
.metadata i:not(.icon-view) { margin-top:2px; }
#search-result { margin-bottom:10px; color:red; }
#similar { background:#fff; padding:10px 10px 5px; }
.similar { width:275px; height:55px; padding-right:5px; float:right; }
.similar img { margin-left:4px; float:right; }

/* Boxes */
article1 { width:560px; height:auto; border:1px solid #ddd; margin:0 0 10px 10px; padding:10px; text-align:right; float:right; box-shadow:inset 0 0 0 1px #fff;margin-bottom:15px; }
article1 .block { padding:10px; }
rozex { font:13px A Google; }
rozex a { background:#666; padding:1px 9px; font-size:12px; color:#fff; float:left; }
rozex a:hover { background:#111; color:#fff; }
hr { border-bottom:1px dashed #444;padding-bottom:5px;}
ul1 a { font:12px tahoma; color:#555; }
ul1 li { padding:4px 5px 2px; color:#555; }
ul1 li:hover { background:#f05a5a; }
ul1 li:hover a { color:#fff; }

/* Forum*/
.pagenavi{clear:both;}
.pagenavi a, .pagenavi span{text-decoration:none;border:1px solid rgb(191, 191, 191);padding:3px 8px;margin:3px;border-radius:25px;font-size:16px;background-color:#00b7e5;color:rgb(255, 255, 255);}
.pagenavi a:hover, .wp-pagenavi span.current{border-color:#000;}
.pagenavi span.current{font-weight:bold;}
.forum{font:11px tahoma;width:100%;text-align:center;direction:rtl;border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-khtml-border-radius:5px;background:#f4f4f4;padding:5px;}
.forum td{border:1px #ccc solid;border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-khtml-border-radius:5px;background:#eee;transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;-ms-transition:all 0.5s ease;-khtml-transition:all 0.5s ease;-webkit-transition:all 0.5s ease;}
.forum-links a{display:block;text-align:right;color:#555;text-decoration:none;transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;-ms-transition:all 0.5s ease;-khtml-transition:all 0.5s ease;-webkit-transition:all 0.5s ease;padding:3px;}
.forum-links a:hover{color:#000;text-shadow:0px 0px 3px;-moz-text-shadow:0px 0px 3px;-o-text-shadow:0px 0px 3px;-ms-text-shadow:0px 0px 3px;-khtml-text-shadow:0px 0px 3px;-webkit-text-shadow:0px 0px 3px;}
.forum-links{padding:0px;}
.forum tr:hover td{background:#ddd;}
.forum-thead td{padding:3px;background:#ccc;}
.pagenf {text-align:center;}
.pagenf a {border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-khtml-border-radius:5px;border: 1px solid #CCCCCC;padding:5px;margin: 4px;display:inline-block;background: url(https://rozblog.com/temp/rozex/hashilan/MTForumBlock_row_over.png) repeat-x;color:#999;transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;-khtml-transition:all 0.5s ease;-webkit-transition:all 0.5s ease;text-decoration:none;}
.pagenf a:hover {border-color:#666;color:#666;}
.pagenf .current{border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-khtml-border-radius:5px;border: 1px solid #CCCCCC;padding:5px;margin: 4px;display:inline-block;background: url(https://rozblog.com/temp/rozex/hashilan/MTForumBlock_row_over.png) repeat-x;color:#bbb;}

/* Comments */
.comment { margin-bottom:10px; }
.comment .comment { margin:5px 30px 5px 0; }
.comment-author-admin .cm-content { background:#7ac142; color:#fff; }
.comment-author-admin .metadata { background:#555; color:#fff; box-shadow:inset -1px -1px 0 #333; }
.cm-content { background:#fff; padding:5px; }
.avatar-45 { margin:0 5px 5px 0; float:left; }
.reply { background:#888; padding:0 5px 5px; float:left; color:#fff; }
.reply:hover { background:#444; }
#send-comment p { margin-bottom:10px; }
#send-comment label { width:120px; float:right; }
#send-comment span { color:red; }
.ltr { direction:ltr; }
#pages {font-size:14px; background:#555; min-height:28px; margin-bottom:10px; text-align:center;color:#fff }
#pages a{background:#777;border:1px #777 solid;border-radius:4px;margin:5px;padding:2px;display: inline-block;color:#fff }
#pages a:hover{ background:#111;border:1px #555 solid;border-radius:4px;m;margin:5px;padding:2px;color:#fff }
#pages .pagination_current{ background:#eee;color: #333;padding:3px;border-radius:3px;}
#pages .pagination_current:hover{ background: #222;color:#fff;padding:3px;border-radius:3px;}
.next,.prev { background:#7ac142; width:60px; height:28px; margin:0; padding:0; line-height:25px; border-radius:0 5px 5px 0; }
.next { float:left; border-radius:5px 0 0 5px; }
.current { background:#eee; color:#555; }

#rozexdivstyles{width:100%;height:100px;}#rozexdivstyles td{text-align:center;opacity:0;filter:alpha(opacity=0);transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;-ms-transition:all 0.2s ease;-khtml-transition:all 0.2s ease;-webkit-transition:all 0.2s ease;}#rozexdivstyles a{color:#111;}

/* Bottom */
.bottom { width:495px; float:right; }
#bottom { margin-right:10px; }
.bottom .block { padding:0; }
.bottom li { background-position:477px center !important; }

.post-archive{height: 100px;}
.post-archive1{height: 90px;width: 170px;margin: 5px 0px 5px 5px;float: right;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;-o-border-radius: 5px;-ms-border-radius: 5px;border: 2px solid #ccc;}

/* Footer */
footer { background:#444; background:-moz-linear-gradient(top,#444 0%,#5f5f5f 100%); background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#444),color-stop(100%,#5f5f5f)); background:-webkit-linear-gradient(top,#444 0%,#5f5f5f 100%); background:-o-linear-gradient(top,#444 0%,#5f5f5f 100%); background:-ms-linear-gradient(top,#444 0%,#5f5f5f 100%); background:linear-gradient(to bottom,#444 0%,#5f5f5f 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#444',endColorstr='#5f5f5f',GradientType=0); height:30px; margin:30px 0 5px; padding:15px; color:#eee; }
footer p { margin-top:4px; }
footer a { colro:#e8e8e8 }
#rozex { background:#7ac142; padding:2px 9px; font-size:15px; color:#fff; float:left; }
#rozex:hover { background:#c33; }
#footer-nav { margin-bottom:20px; font-size:10px; }
#footer-nav [id] { float:left; }
#footer-nav [id]:hover { opacity:.7; }


براي نمايش پاسخ جديد نيازي به رفرش صفحه نيست روي تازه سازي پاسخ ها کليک کنيد !



برای ارسال پاسخ ابتدا باید لوگین یا ثبت نام کنید.