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

شروع موضوع توسط سایت دارکوب ‏18 نوامبر 2017 در انجمن زبان CSS

  1. سایت دارکوب

    سایت دارکوب New Member

    ارسال‌ها:
    2
    تشکر شده:
    0
    امتیاز دستاورد:
    1
    زمانی که قالب معمولی سایت خود را طراحی نمودید هم اکنون زمان آن می باشد که قالب سایت سازگار با رزولوشن های مختلف طراحی نمایید. برای انجام این کار کافی است ابتدا کد زیر را بین دو تگ 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 می توانید پیاده سازی نسخه موبایلی سایت را بسیار راحتر انجام دهید زیرا خود این کتابخانه تغییر سایزهای المان های موجود در صفحه را به صورت خودکار انجام می دهد.

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

    HTML و CSS
     
    نوشته شده توسط سایت دارکوب در ‏18 نوامبر 2017
  2. m94azm

    m94azm New Member

    ارسال‌ها:
    14
    تشکر شده:
    0
    امتیاز دستاورد:
    1
    بهترین راه استفاده از فریم ورک ها هستش مقل بوت اساتراپ
     
    نوشته شده توسط m94azm در ‏11 جولای 2018
  3. iranlaw

    iranlaw New Member

    ارسال‌ها:
    2
    تشکر شده:
    0
    امتیاز دستاورد:
    1
    سلام دوستان برای استایل دادن به دکمه ها چند تا منبع خوب معرفی کنید
     
    نوشته شده توسط iranlaw در ‏22 اکتبر 2018
  4. it1press

    it1press New Member

    ارسال‌ها:
    7
    تشکر شده:
    0
    امتیاز دستاورد:
    1
    سلام
    امروزه دیگه کسی بصورت دستی سایت رو ریسپانسیو نمی کنه. همه از bootstrap یا materialze css استفاده میکنن.
    البته materialze css خیلی فریمورک حرفه ای هست.
    پیشنهاد میکنم ازش استفاده کنید.
     
    نوشته شده توسط it1press در ‏5 دسامبر 2018

به اشتراک بگذارید