630
تشکر

آموزش قدم به قدم طراحی ریسپانسیو یک سایت کامل

آموزش قدم به قدم طراحی ریسپانسیو یک سایت کامل

آموزش قدم به قدم طراحی ریسپانسیو یک سایت کامل

ابتدا توصیه میکنیم حتما مطالب “ طراحی ریسپانسیو (Responsive) چیست؟” و ” آموزش طراحی ریسپانسیو” را بخوانید.

در این آموزش به شما نشان خواهیم داد که چگونه باید یک سایت ریسپانسیو درست کرد. سایتی که در همه رزولیشن ها به خوبی نمایش داده شود.

هدف پروژه: درباره من


ایجاد کردن سند

صفحه رو با doctype HTML5 و متا تگ ها آغاز کردیم. اما در طراحی ریسپانسیو ما نیاز به نصب کامپوننت های اضافی خواهیم داشت. بیشتر این متا تگ ها توسط مرورگرهای مدرن پشتیبانی میشوند.

<!DOCTYPE HTML>
<html>
<head>
	<title>آموزش طراحی ریسپانسیو یک سایت کامل</title>
	<meta name="author" content="آپارنت">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="HandheldFriendly" content="true">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	 <link rel="stylesheet" type="text/css" href="style/styles.css">  
  	<link rel="stylesheet" type="text/css" href="style/responsive.css">  
	<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="js/js-main.js"></script>
  	 <!--&#91;if lt IE 9&#93;>  
    	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>  
    	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>  
  	<!&#91;endif&#93;-->
</head>

متا تگ viewport تگ خیلی مهمی برای کار کردن با طراحی ریسپانسیو است. ما اندازه را برابر یک کردیم. بنابراین پیکسل ها در صفحه نمایش به خوبی نمایش داده میشوند.
همچنین ما از برای نسخه های IE پایین تر از 9 فایل هایی را فرخوانی کردیم که موجب شناخت مرورگر از عناصر HTML5 و همچین media queries میشود.

برای خواندن مطالب بیشتر در مورد متا تگ viewport به Mozilla Developer مراجعه کنید.
برای خواندن مطالب بیشتر در مورد متا تگ X-UA-Compatible به Stackoverflow و MSDN Microsoft مراجعه کنید.
برای خواندن مطالب بیشتر در مورد پشتیبانی نشدن عناصر HTML5 در IE به آپارنت مراجعه کنید.


بلاک های محتوای اصلی
کل سند اصلی تشکیل شده از یک دایو با تعداد زیادی تگ section در داخل خودش. تگ header شامل عکس من, آدرس ایمیل, و دیگر اطلاعات مهم است. بعد از قراردادن تگ header بقیه سند را نیز مانند زیر وارد میکنیم.

	<div id="w">
		<header class="clearfix">
		    <div id="info">
		    	<div id="photo">  
		       		<img src="http://aparnet.ir/wp-content/themes/aptana/about/style/photo.png" alt="محسن شفیعی"/>  
		    	</div>
		        <h1><span>محسن شفیعی</span></h1>  
		        <h3><span>توسعه و طراحی وب</span></h3>
		        <h3><span><a href="http://aparnet.ir">آپارنت</a></span></h3>    
		        <small>  
		          <span>مشهد</span>
		          <span>ایران</span>  
		        </small>  
		        <small><span>mohsen.sh12@hotmail.com	</span></small>
		    </div>
		</header><br />
		<section id="myhistory">
			<h2>درباره من</h2>
			<p>
				من محسن شفیعی هستم متولد 73 که علاقه زیاد به دنیای وب منو واداشت که به این عرصه پا بذارم. پس از چند ماه کارکردن در دنیای وب جای خالی یک وب سایت قدرتمند رو در ایران حس کردم. به همین دلیل سایت 
				آپارنت رو راه اندازی کردم تا محلی برای معرفی فناوری های روز جهان وب باشه.
			</p>
		</section><br />
		<section id="skills">
			<h2>مهارت ها</h2>
			<section id="skills-right">
				<ul>
					<li>HTML5/CSS3</li>
					<li>Jquery</li>
					<li>Wordpress</li>
					<li>PHP</li>
					<li>MySQL Database</li>
				</ul>
			</section>
		</section><br />
		<section id="articles">
			<h2>آخرین مطالب</h2>
			<a href="http://aparnet.ir/114-%d8%ad%d9%84-%d9%85%d8%b4%da%a9%d9%84-%d9%be%d8%b4%d8%aa%db%8c%d8%a8%d8%a7%d9%86%db%8c-%d9%86%d8%b4%d8%af%d9%86-%d8%b9%d9%86%d8%a7%d8%b5%d8%b1-html5-%d8%af%d8%b1-ie">حل مشکل پشتیبانی نشدن عناصر HTML5 در IE</a><br />
			<a href="http://aparnet.ir/111-%d9%be%db%8c%d8%af%d8%a7%da%a9%d8%b1%d8%af%d9%86-%d9%82%d8%a7%d8%a8%d9%84%db%8c%d8%aa-%d9%87%d8%a7%db%8c-%d9%85%d8%b1%d9%88%d8%b1%da%af%d8%b1%d9%87%d8%a7">پیداکردن قابلیت های مرورگرها</a>
		</section>
	</div>

خب حالا در فایل استایل کدهای زیر را قرار میدهیم.

*{ margin: 0; padding: 0; direction: rtl; font-family: "Tahoma";}  
html { height: 101%; }  
body { background: #f2f2f2 url('http://aparnet.ir/wp-content/themes/aptana/style/images/bg.png');  padding-bottom: 65px; }  
  
h1 { color: #454545; font-size: 2.0em; margin-bottom: 6px; }  
h2 { color: #484848; font-size: 1.5em; margin-bottom: 10px; text-decoration: underline; }  
h3 { color: #777; font-size: 1.0em; font-weight: normal; margin-bottom: 10px; }  
h4 { color: #656565; font-size: 0.8em;font-weight: bold;margin-bottom: 4px; }  
  
p {color: #565656; font-size: 1.0em; line-height: 1.4em; margin-bottom: 15px; padding-left: 35px; }  
small { font-family: "Balthazar", serif; color: #656565; font-size: 0.7em; display: block; margin-bottom: 6px; }  
ul { display: block; list-style: none; }  
ul li { padding-right: 45px; vertical-align: top;margin-bottom: 5px; color: #666; font-size: 1em; line-height: 2.3em; }  
  
img { border: 0; max-width: 100%; }  
  
a { color: #5582d6; text-decoration: none; }  
a:hover { text-decoration: underline; }  

	/** @group core layout **/  
#w { margin: 0px auto; padding: 20px 40px; padding-top: 35px; background: #fff; min-width: 260px; max-width: 1200px; border-radius: 0px 0px 8px 8px; }  
  
header { width: 100%; }  
  
/** @group personal settings **/  
#info { float: none; margin-bottom: 12px; }  
#photo { float: left; }  
#photo img {   
	-webkit-border-radius: 3px;  
	-moz-border-radius: 3px;  
	border-radius: 3px;  
	-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);  
	-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);  
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);  
	background-color: #fff;  
	border: 1px solid #ccc;  
	padding: 5px;   
}  

خب تا اینجا طراحی سایت ما مانند یک سایت معمولی بود.
خب به فایل responsive.css میرویم و کدهای زیر را قرار میدهیم.

@media only screen and (max-width: 740px) {  
    h1 { font-size: 4.5em; }  
    h3 { font-size: 2.2em; }  
    h2 { display: block; text-align: center; }  
    #info { float: none; display: block; text-align: center; }  
    #photo {  
        float: none;  
        display: block;  
        text-align: center;  
    }  
    #w { padding: 20px 15px; }  
    p { padding: 0; }  
}

در کد بالا ما کدهایی که مربوط به نمایشگرهایی که بیشترین عرضشان 740px است را قرار دادیم. همه چیز واضح است. کدهای دیگر را نیز مانند زیر قرار میدهیم.

@media only screen and (max-width: 570px) {  
    ul li {  
        display: inline-block;   
        padding-left: 15px;   
        width: 140px;   
        background-position: -5px 0px;  
        margin-right: 6px;   
        line-height: 1.7em;  
    }  
    #skills-left, skills-rightright { margin-bottom: 15px; }  
}  

@media only screen and (max-width: 480px) {  
    ul li { width: 120px; }  
    #w { margin: 0 20px; }  
}  
  
@media only screen and (max-width: 320px) {  
    #w { margin: 0 10px; }  
}  
  
/** iPhone only **/  
@media screen and (max-device-width: 480px) {  
    ul li { width: 150px; }  
}

خب کارمان به اتمام رسید. این بود یک طراحی ریسپانسیو.
اگر سوالی دارید در قسمت نظرات بنویسید تا در یک مطلب جداگانه پاسخ دهیم.

بروزرسانی

دانلود نمونه طراحی شده

  • فاتح خیبر می‌گه:

    مطلب شما عالی بود،آفرین بر شما،سپاس.

  • سامان کیانی می‌گه:

    سلام
    تو رو خدا من رو تو ریسپانسیو کردن این منو کمک کنید
    http://uplod.ir/i13cymitkzog/ghaleb_(2).zip.htm

  • افشین می‌گه:

    سلام
    من کد ریسپانسیو نشوتم
    اما چیزی که تو گوشی میبینم با چیزی که تو PC هست فرق داره
    تو PC مشکل نداره و به هر سایزی ریسپانسیو کنم همون دیده میشه
    اما برای گوشی فقط وقتی max-width رو روی 1000px تنظیم میکنم جواب میده
    و اگه بذارم 900px یا 700px یا هرچیزه دیگه جواب نمیده و مقادیر پیشفرض رو نشون میده
    چرا ؟؟؟؟

  • MaT می‌گه:

    سلام.مرسی خسته نباشید
    من سایتمو به همین طریق رسپانسیو کردم. با Web Developer فایرفاکس تست میکنم مشکلی نداره حتی با سایتای تست رسپانسیو هم چک کردم مشکلی نداره.اما عملاً باگوشی های مختلف ک نگاه میکنم به هم ریخته س.میشه راهنمایی کنید باید چیکار کنم؟ممنونم

  • یو پی اس می‌گه:

    خیلی عالی بود ممنونم

  • فاطیما می‌گه:

    مطلب خوبی بود ممنونم.من دنبال طراحی منوهایی که از یه حد به بعد تبدیل به مثلا چندتا خط میشن هستم میششه کمک کنید؟؟؟؟؟بگیذ چطوری طراحیش کنم؟؟؟؟مرسی

  • مقاله مفید بود خسته نباشید

  • سید محمد می‌گه:

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

    http://khorshidealeyasin.com/

  • طراح می‌گه:

    مفید و خوب ممنون اپارنت بابت موزش

  • ندا می‌گه:

    با تشکر از آموزش مفیدتون، من چند تا سوال ازتون داشتم ممنون میشم پاسخ بدین:

    این اندازه هایی که دادین به هر مدیا دادین دقیقه؟ یعنی تو همه موبایلا و تبلتا به این اندازه هست؟ به صورت landscape و سایزای دیگه هم نیازی هست تعریف کنیم؟مثلا برای وقتی که تبلت به صورت افقی یا عمودی نگه داشته میشه؟

    اگه بخوام برای هر مدیا یه jquery جداگانه بدم، چطوری باید تو jquery اون مدیارو معرفی کنم؟

  • ممنون , خیلی مفید بود استفاده کردیم

  • مژگان می‌گه:

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

  • مینا می‌گه:

    مرسی از مطلب خوبتون

  • طراحی سایت می‌گه:

    آموزش مفیدی بود. ممنون.

    میشه مباحث سئو در طراحی سایت رو هم برای طراحی اسکین آموزش بدین؟

    با تشکر فراوان

  • zahra می‌گه:

    سلام

    چه جوری میشه همین سایت را با بوتستراپ تعیین کرد؟؟؟؟؟؟؟؟؟؟؟

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

  • B-T می‌گه:

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

  • طراحی سایت می‌گه:

    استفاده کردم توتریال آموزشی خوبی بود . موفق باشید

  • سید امیر می‌گه:

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

    گل کاشتی داداش، این هم شد آموزش؟ چهار خط کد گذاشتی نوشتی و آخرش نوشتی این بود طراحی رسپانسیو و انتظار داری هرکی مطلب را خوند همه چیزو یاد گرفته باشه؟ جمع کن داداش….

  • سجاد می‌گه:

    سلام
    با توجه به متنی ک نوشتید، برای تبدیل یک قالب که قبلا کار شده به جالت ریسپانسیو کافیه که موارد خاص رو با استفاده از @media برای دستگاه های مختلف اختصاصی کنیم و متایی هم ذکر شده رو هم درج کنیم.
    حالا دو سوال پیش میاد
    اول اینکه اگر قالب اولیه ب صورت پیکسلی طراحی شده باشه در هنگام استفاده @media می تونیم بیایم ب صورت درصدی اندازه ها رو کار کنیم؟ ( بدون اینکه استایل اصلی رو ویرایش کنیم. )
    بین این حالت و اینکه استایل اصلی رو هم ویرایش کنیم ب نظرتون تفاوتی هست؟
    دوم برای مشاهده حالت قالب در عرض های مختلف نرم افزار خاصی هست؟

  • manizhe می‌گه:

    خیلی ممنون از مطالب مفیدتون – من یک سایت نوشتم و میخاستم دومی را با تکنولوژی ریسپانسیو بنویسم دنبالش بودم چطوری شروع کنم واقعا سایتتون کمک زیادی کرد امیدوارم هر روز پیشرفت کنید و بازم دانشتونو انتشار بدین .
    یک سوال داشتم من تو cms ام امکانی گذاشتم که ادمین بتواند برای هر produnt یک عکس انتخاب کند وقتی اونو ویرایش میکنه عکس قبلی هنوز در پوشه هست کدهای حذف عکس را هنگام update عکس جدید گذاشتم ولی کار نمیکنه میشه کمکم کنید اینو میدونم که باید unlink بشه ولی کارنمیکنه

  • setareh2013 می‌گه:

    با سلام
    ممنون از زحماتتون خیلی استفاده کردم . موفق باشید

  • عطا می‌گه:

    سلام
    یه سوال، چه نیازی به اون تگ های ویوپورت و اینها هست؟
    کلا با @media سایز های مختلف رو معلوم میکنیم و استایل های مختلف تعیین میکنیم دیگه…
    این کار رو امتحان هم کرده ام، بقیه ی کارها برای چیست؟

    • محسن شفیعی می‌گه:

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

    • عطا می‌گه:

      پیشاپیش از وقتی که میذارید ممنونم :)
      ____
      یعنی دقیقا همون کارها رو بکنم، و فقط این تگ ها رو هم اضافه کنم؟!
      در ظاهر تفییری ایجاد نمیشود؟
      یعنی اصولا کار همونه که برای رزولوشن های مختلف، تنظیمات استایل مختلف انجام بدیم؟ و حالا اون تگ ها رو هم اضافه کنیم که مطمئن باشیم؟
      راستش من بدون این تگ ها امتحان کردم و روی اندروید و اپل و … هم امتحانش کردم.
      چرا درست میشه پس؟
      _____
      من html و css رو خیلی خوب بلدم و کار کرده ام. و تازه این قضیه @media رو فهمیدم.
      با این اوصاف پس طراحی ریسپانسیو فقط همین بحث تنظیمات استایل برای رزولوشن های مختلفه؟
      پس برای چی این همه فیلم آموزشی طراحی ریسپانسیو هست؟

    • محسن شفیعی می‌گه:

      بله، حرف شما درست است.
      پایه طراحی ریسپانسیو media@ است، خب دوستان به فیلم های آموزشی مشتاق ترند.
      البته تکنیک هایی نیز در طراحی رییسپانسیو است که شاید آنها را در فیلم ها آموزش میدهند.

  • محمد می‌گه:

    تشکر بابت مطلب خوبتون

  • pouyan می‌گه:

    آقا دمت گرم مشکل اصلیم این تگ های متا بود که با این پست حل شد

    • عطا می‌گه:

      من یه سوال دارم…
      اصلا چه نیازی به این تگ ها هست؟
      شما چرا به اینها نیاز داشتید و دغدغه تان بود؟
      من روی یکی از وبسایت هایی که درست کرده ام، امتحان کردم و فقط با @media روی دو عرض مختلف استایل جدید تعریف کردم و امتحان هم کردم…
      کمک کنید؟!

  • بسیار عالی و مفید. ممنون از شما

  • مهدی می‌گه:

    سلام ممنون از مقاله خوبتون

    چرا وقتی مارجین رو در کدهای ریسپانسیو تغییر میدم تغییری ایجاد نمیشه وقتی صفحه کوچک میشه. البته کدهای css دیگه کار می کنه.

    مارجین در حالت واکنش گرا کار می کنه؟ یا مشکل داره؟
    لطفا توضیح بدید.
    یاعلی

  • شمس می‌گه:

    سلام.ممنون از مطالب مفیدتون.یک سوال داشتم.سایت رسپانسیو رو طراحی کردم و در مرورگرهای مختلف در کامپیوتر درست کار می کنه ولی روی موبایل که باید حد کوچیک رسپانسیو کار کنه ،عمل نمیکنه.به نظرتون مشکل از کجاست؟

  • ایوب قاسمی می‌گه:

    با سلام.
    بسیار خوب و روان و کامل توضیح داده شده بود.
    تشکر از شما اقا محسن

  • kaviyan می‌گه:

    tashakkor az mataleb khoobetoon.

  • بهنام می‌گه:

    سلام من قالب به این صورت نوشتم
    .container{
    border:solid;
    width:960px;
    margin:auto;
    }

    .sidebar{
    border:solid;
    width:250px;
    float:right;
    }

    .content{
    border:solid;
    width:700px;
    }

    sidebar
    content

    حالا مدیا کوئری ها رو چه جوری بنویسم که ریسپانسیو بشه.

  • سحر می‌گه:

    خیلی ممنون

  • طراحی سایت می‌گه:

    سلام. دوست عزیز سایت خود شما با wordpress ساخته شده؟ نسخه جدید وردپرس ریسپانسیوه؟

    • محسن شفیعی می‌گه:

      سلام. بله با ریسپانسیو هست.
      قالب ریسپانسیو ربطی به نسخه وردپرس نداره. اما خود وردپرس در نسخه 3.6 قالب ریسپانسیو ارائه میده.

  • احمد می‌گه:

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

  • maryam می‌گه:

    lotfan ye manbae khob moarefi konid ke betonim shoro be yadgiri konim mer300000000000

  • حسن می‌گه:

    سلام

    یه سوال در مورد این داشتم :
    http://aparnet.ir/wp-content/themes/aptana.v2/style/images/

    چه کدی بکار ببرم تا تصاویر داخلش رو نمایش بده ولی فولدر رو نه ؟

  • حسن می‌گه:

    سلام
    چرا فونتی که پیوست کردید اینطوری نمایش داده میشه ؟
    http://www.8pic.ir/images/00912590137548732519.png

  • rahaamirchermahini می‌گه:

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

    با تشکر
    منتظر مطالب جدید شما در این زمینه هستم

    • محسن شفیعی می‌گه:

      در اصل استفاده از ریسپانسیو هم برای اینکاره. که با کم کردن عرض مرورگر استایل باز هم درست نمایش داده بشه.
      اگه مطالب رو کپی و پیست کردین باز هم درست نمایش داده نشده باید مطمئن بشید که استایل ها درست پیوند خورده باشه. نمونه را دانلود کنید, متوجه میشید.

    • rahaamirchermahini می‌گه:

      با سلام و عرض ادب
      ممنونم از جواب شما
      اما اگه امکان داره یه قالب رسپانسیو رو بصورت کامل
      اموزش بدید مثلا اینکه چرا در قسمت
      ul lu {
      padding-left باید در سایز 780 حتما 15px باشه
      یعنی منظورم اینه که مطلب رو کمی شکافته تر وروتن تر بنویسین البته اگه مقدوره چون اکثرا در ایران فعلا
      در این رشته مبتدی هستن و مثل شما عامل نیستن تا بتونن تمام اجزای اون رو حدس بزنن

      با تشکر
      منتظر یه اموزش کامل در این زمینه از شما استاد بزرگوار هستم
      موفق وسربلند باشید

    • محسن شفیعی می‌گه:

      خب بسته به نظر طراح داره. مثلا padding-left خودش میخواسته 15px باشه.
      در آینده مطلبی در مورده نحوه طراحی آسان ریسپانسیو منتشر میکنم.
      ممنون

    • rahaamirchermahini می‌گه:

      با سلام و ممنونم از با بت جواب شما
      اما بی صبرانه منتظ یه اموزش بصورت کامل تر و در این زمینه هستم که حداقل در دو سایز نوشته شده باشه
      و در مورد padding ها margin ها هم کمی توضیح بدین که چرا در اون سایز اینه ودرسایز دیگه به شکل دیگر
      امیدوارم هر چه زودتر این اموزش اماده بشه
      چون من نزدیک به 8 ماهه که دنبال یه منبع خوب در این زمینه بودم

      با تشکر وارزوی توفیق

    • محسن شفیعی می‌گه:

      خوب ببینید. شما میخواید توی مثلا نمایشگر با عرض بیشتر از 1200px مارجین یک عنصر 50px باشه. ولی توی مانیتور های کمتر از 1200px مارجین یک عنصر 25px باشه. این با شماست که میخواهید چی کار کنید.

  • Mohammad می‌گه:

    خوب دوست عزیز شما دو تا فایل جاوا اسکریپ هم فراخوانی کردید اما درست نبوده ! یعنی آدرس فایل های جاوا درست نیست

    خوب نباید هم کار کنه 😀

    • mohsen_shafiee می‌گه:

      اون فایلها مهم نیست. توی تمپلیت من بود فراموش کردم بردارمش

    • Mohammad می‌گه:

      والا برای من هم کار نکرد ، اگه ممکنه کد ها رو برای منم ایمیل کنید شاید یه جایی اشتباه کرده باشم
      با تشکر

    • mohsen_shafiee می‌گه:

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

    • Mohammad می‌گه:

      تمام کد ها رو کات کنید بعد به UTF-8 تبدیل کنید . بعد دوباره کد ها رو قرار داده و ذخیره کنید
      چون الان نوشته ها خراب شده . در ضمن بازم کار نکرد !

    • mohsen_shafiee می‌گه:

      اصلاح شد.
      در ضمن یادتون باشه برای باگذاری دو فایل جاوا اسکریپت که داخل متن به اون اشاره شده باید به اینترنت متصل باشید.

  • G.S می‌گه:

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

    • mohsen_shafiee می‌گه:

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

    • G.S می‌گه:

      تمام لینک ها متصل هستش و مشکلی نیست
      دستی هم عرض مرورگر رو کم کرم ولی به تنیجه
      حتی در حالت عادی (بزرگترین عرض) هم نشون نمیده
      کلا هر استایلی که در مدیا نوشه شده کار نمیکنه

    • mohsen_shafiee می‌گه:

      شما قدم به قدم مانند کد بالا عمل بکنید. فکر نکنم اشتباهی پیش بیاد.
      در ضمن در نظر داشته باشید ما کدهای اصلی رو داخل هیچ مدیایی قرار نمیدیم.
      فقط کدهای مربوط به سایزهای مختلف رو در مدیاهای مختلف قرار میدیم

      من همین الان فایل این مطلب رو براتون ایمیل میکنم.

    • G.S می‌گه:

      من هم فایلم رو برای شما ایمیل کردم در صورت امکان و داشتن وقت
      بررسی کنید ممنون میشم.


  • نظرات این مطلب بسته است.