طراحی نسخه ریسپانسیو سایت با استفاده از HTML و CSS طراحی نسخه ریسپانسیو سایت با استفاده از HTML و CSS

رتبه این آیتم
رتبه 3 در 24 رای از 1 تا 5

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

 <meta name="viewport" content="width=device-width">

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

سپس کافی است سه فایل CSS برای رزولوشن های مختلف طراحی نمایید و در صفحه HTML خود لینک نمایید:

<link href="template.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 1024px)" />
<link rel="stylesheet" media="only screen and (min-width: 0px) and (max-width: 327px)" href="mobile.css">
<link rel="stylesheet" media="only screen and (min-width:328px) and (max-width: 768px)" href="templates/template/tablet.css">

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

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

فایل CSS سوم برای رزولوشن های صفحه مابین 1024 و 327 پیکسل می باشد، که برای مرورگرهای و ابزارهای میان سایز نظیر تبلت طراحی می گردند.

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

* دقت نمایید هر کدی که در برای هر سایزی در فایل CSS مورد نظر درج می نمایید برای سایر سایزها مورد استفاده قرار نمی گیرد.

ساخت نسخه موبایل وب سایت توسط با روش های دیگری نیز امکان پذیر می باشد، اما در این مقاله به ساده ترین روش پرداخته ایم. برای مشاوره در زمینه طراحی ریسپانسیو سایت با دارکوب تماس حاصل فرمایید.

معمولا مشکل برای نمایش سایت بین عرض 327 و 1024 می باشد که می توانید آن محدوده را نیز به چند فایل مختلف CSS اختصاص دهید به عنوان مثال از 327 تا 500، از 500 تا 700، از 700 تا 900 و از 900 تا 1024.

با استفاده از کتابخانه bootstrap می توانید پیاده سازی نسخه موبایلی سایت را بسیار راحتر انجام دهید زیرا خود این کتابخانه تغییر سایزهای المان های موجود در صفحه را به صورت خودکار انجام می دهد.

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


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

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

به اشتراک گذاری مطلب در

به اشتراک گذاری در فیس بوک به اشتراک گذاری در گوگل پلاس به اشتراک گذاری در توئیتر به اشتراک گذاری در لینکدین

آیتم های گفته شده(توسط تگ)

18 نظرات

  • لينک نظر علی اکبری زارع پنج شنبه, 31 فروردين 1396 16:39 پست شده توسط علی اکبری زارع

    سلام خیلی ممنون از مطلبتون من به این صورت در استایل قالب نوشتم درسته؟ @media only screen and (max-width: 740px) { .nameclass{display:none !important;} }

  • لينک نظر توحید دوشنبه, 23 اسفند 1395 09:52 پست شده توسط توحید

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

  • لينک نظر تجهیزات آشپزخانه جمعه, 16 مهر 1395 09:46 پست شده توسط تجهیزات آشپزخانه

    خیلی عالی بود توی سایتم استفاده کردم تشکر

  • لينک نظر کدبانوی ایرانی شنبه, 27 شهریور 1395 21:19 پست شده توسط کدبانوی ایرانی

    الان این سایت ریسپانسیو هست؟

  • لينک نظر آگهی رایگان شنبه, 13 شهریور 1395 17:02 پست شده توسط آگهی رایگان

    راه رسپانسیو کردن یک عنصر مثلا در یک div چیست؟

  • لينک نظر رضایی دوشنبه, 18 مرداد 1395 10:30 پست شده توسط رضایی

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

  • لينک نظر طراحی سایت در اصفهان دوشنبه, 14 تیر 1395 23:44 پست شده توسط طراحی سایت در اصفهان

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

  • لينک نظر rebel.king یکشنبه, 23 خرداد 1395 18:05 پست شده توسط rebel.king

    very very very very very good

  • لينک نظر میرزاییان پنج شنبه, 13 خرداد 1395 20:45 پست شده توسط میرزاییان

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

  • لينک نظر سارا سه شنبه, 07 ارديبهشت 1395 14:58 پست شده توسط سارا

    سلام ممنون از اطلاعاتتون فقط من این کد هارو لینک کردم داخل صفحه Html میخواستم بپرسم داخل صفحه css چی باید بنویسم؟

  • لينک نظر شروین قضایی شنبه, 08 اسفند 1394 22:51 پست شده توسط شروین قضایی

    البته این روش توصیه نمیشه چون روی سئو تاثیر منفی میذاره چونکه اولا سه تا فایل css همزمان لود میشه و قسمت بزرگی از این فایلا با هم یکسانه که باعث میشه اون کد ها رو سه بار لود کنیم و دوم اینکه حجم سایت بالاتر میره باید تمام کد های css در یک فایل قرار بگیرند و تنها یکبار لود شوند

  • لينک نظر Reza.sp یکشنبه, 25 بهمن 1394 14:52 پست شده توسط Reza.sp

    یه دنیا ممنون :)

  • لينک نظر یوسف جوکار جمعه, 23 بهمن 1394 23:17 پست شده توسط یوسف جوکار

    سلام چطور باید رزولوشن موبایل رو روی سیستم خودمون پیاده سازی کنبم تا بتونیم درست حسابی به css ها دستور بدیم

  • لينک نظر سمانه دوشنبه, 23 آذر 1394 22:03 پست شده توسط سمانه

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

  • لينک نظر سیدجمال دوشنبه, 08 دی 1393 17:04 پست شده توسط سیدجمال

    با سلام و عرض ادب یک صفحه به آدرس ذیل دارم و از نوع html هستش و میخوام ریسپانسیوش کنم، در صورت امکان قبول زحمت کنید و بفرمایین هزینش چقدر میشه با تشکر ------------------------------ هزینه ریسپانسیو نمودن قالب در حدود 500 هزار تومان می باشد

  • لينک نظر بازاریابی اجازه ای جمعه, 05 دی 1393 13:17 پست شده توسط بازاریابی اجازه ای

    توی هر فایل css میشه از html استفاده کرد برای نوشتن؟ چون من css بلد نیستم

  • لينک نظر مرکز توزیع شارژ ارزان در کشور سه شنبه, 25 آذر 1393 17:07 پست شده توسط مرکز توزیع شارژ ارزان در کشور

    هرسایتی رو میشه ریسپانسیو کرد یا باید از نو طراحی بشه ؟ سپاس --------------------------- بله امکان تهیه نسخه ریسپانسیو هر نوع وب سایتی وجود دارد

  • لينک نظر roghi پنج شنبه, 13 آذر 1393 19:41 پست شده توسط roghi

    سلام وقتتون بخیر. تو share کردن برای linkedin مشکل دارم. نمیشه.

يک نظر بدهيد

موارد ستاره دار الزامی هستند

info [ at ] joomir.com
تهران، سعادت آباد، سرو غربی، کوچه آریا، پلاک 4، واحد 7
22083926 - 22085386 - 22082258
طراحی سایت دارکوب | هاست دارکوب | دارکوب نام و علامت تجاری ثبت شده این مجموعه می باشد