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

رتبه این آیتم
طراحی نسخه ریسپانسیو سایت با استفاده از HTML و CSS
رتبه 4 در 57 رای از 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 می توانید پیاده سازی نسخه موبایلی سایت را بسیار راحتر انجام دهید زیرا خود این کتابخانه تغییر سایزهای المان های موجود در صفحه را به صورت خودکار انجام می دهد.

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


سایر مقالاتی که ممکن است علاقه مند باشید


19-خرداد-1397

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

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

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

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

27 نظر

  • takhta.ir سه شنبه, 24 دی 1398 04:05 پست شده توسط takhta.ir

    بسیار عالی . ممنون

  • سعید پنج شنبه, 11 بهمن 1397 11:35 پست شده توسط سعید

    عالی بود سپاس از مقاله جامع و مفیدتون

  • broosk3d پنج شنبه, 01 آذر 1397 00:45 پست شده توسط broosk3d

    سلام وقت بخیر بنده برای گوشی های جدید A8+ که رزولیشن اون ها مثلا 1080 در 2200 هست ، حداقل عرض رو باید روی 1080 قرار بدیم ؟؟؟ اگه مینیمم رو روی 1080 بذاریم و عرض دیو ها رو روی 100 درصد توی کامپیوتر هم اگه با عرض کمتر از 1080 باز کنن سایت از حالت خودش در میاد راهی نیست که توی 1080 موبایل یه جور باشه و توی 1080 کامپیوتر یه جور دیگه؟

  • نیما اکبری دوشنبه, 05 شهریور 1397 11:29 پست شده توسط نیما اکبری

    خدایی دم همتون گرم واقعا عالی بود بینهایت سپاس گذارم

  • agahi90.ir چهارشنبه, 25 بهمن 1396 17:03 پست شده توسط agahi90.ir

    بسیار جالب بود ممنون موفق باشید

  • Agahi90 یکشنبه, 22 بهمن 1396 14:14 پست شده توسط Agahi90

    سلام بسیار آموزش خوبی بود ممنون

  • فرزین دوشنبه, 09 بهمن 1396 11:56 پست شده توسط فرزین

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

  • طراحی سایت شنبه, 16 دی 1396 20:35 پست شده توسط طراحی سایت

    بسیار عالی . ممنون

  • تجهیزات آشپزخانه صنعتی دوشنبه, 03 مهر 1396 21:00 پست شده توسط تجهیزات آشپزخانه صنعتی

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

  • علی اکبری زارع پنج شنبه, 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 مشکل دارم. نمیشه.

يک نظر بدهيد

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

طراحی سایت دارکوب | هاست دارکوب | دارکوب نام و علامت تجاری ثبت شده این مجموعه می باشد.
دارای مجوز از (سازمان نظام صنفی رایانه ای استان تهران) ، (رتبه 4 شورای عالی انفورماتیک کشور) ، (وزارت فرهنگ و ارشاد اسلامی)
آموزشگاه طراحی سایت و سئو با مجوز رسمی از سازمان فنی و حرفه ای کشور افتتاح شد
دارکوب به عنوان شرکت خلاق توسط معاونت علمی و فناوری ریاست جمهوری برگزیده شد