صفحه 1 از 2 12 آخرینآخرین
نمایش نتایج: از شماره 1 تا 10 , از مجموع 14

موضوع: رسپانسیو قالب سایت

  1. #1
    عضو جدید hamidrez4 آواتار ها
    تاریخ عضویت
    Jun 2015
    نوشته ها
    47
    تشکر تشکر کرده 
    143
    تشکر تشکر شده 
    26
    تشکر شده در
    24 پست

    پیش فرض رسپانسیو قالب سایت

    سلام دوستان من یه قالب طراحی کردم و الان میخوام از کسانی که به رسپانسیو کردن قالب آشنایی دارن تقاضا کنم که به من آموزش بدن تا بتونم خودم رسپانسیو قالب رو انجام بدم...
    من درباره یه سری کدها درباره این موضوع اطلاع کسب کردم مثل @media ...
    ولی هر کاری میکنم رسپانسیو نمیشه!!!

  2. # ADS




     

  3. #2
    عضو انجمن mojtaba05 آواتار ها
    تاریخ عضویت
    Apr 2015
    نوشته ها
    200
    تشکر تشکر کرده 
    120
    تشکر تشکر شده 
    164
    تشکر شده در
    140 پست

    پیش فرض پاسخ : رسپانسیو قالب سایت

    سلام٬
    گوگل و سایت‌های اینترنتی بهترین معلم برای شما خواهند بود. رایج‌ترین روش ریسپانسیو سازی استفاده از مدیا کوئری ها هستند٬ مثلا :
    کد:
    @media screen and (max-width: 980px){
    استایل
    }
    خب حالا در حالی که سایت رو در موزیلا دارید می بینید٬ کنترل٬ شیفت و ام رو همزمان بزنید و ببینید در اندازه مثلا 980 پیکسل اگر عرض نمایشگر باشه٬ کدوم قسمتها مشکل دارند. استایل های جدید رو در محلی که در بالا مشخص کردم بنویسید.


    دوست عزیز٬ این یک توضیح خیلی کلی بود٬ بهتره تلاش و جستجو کنی تا بتونی به فوت و فن ریسپانسیو سازی تسلط پیدا کنی.

  4. تعداد تشکر ها از mojtaba05 به دلیل پست مفید


  5. #3
    عضو جدید hamidrez4 آواتار ها
    تاریخ عضویت
    Jun 2015
    نوشته ها
    47
    تشکر تشکر کرده 
    143
    تشکر تشکر شده 
    26
    تشکر شده در
    24 پست

    پیش فرض پاسخ : رسپانسیو قالب سایت

    نقل قول نوشته اصلی توسط mojtaba05 نمایش پست ها
    سلام٬
    گوگل و سایت‌های اینترنتی بهترین معلم برای شما خواهند بود. رایج‌ترین روش ریسپانسیو سازی استفاده از مدیا کوئری ها هستند٬ مثلا :
    کد:
    @media screen and (max-width: 980px){
    استایل
    }
    خب حالا در حالی که سایت رو در موزیلا دارید می بینید٬ کنترل٬ شیفت و ام رو همزمان بزنید و ببینید در اندازه مثلا 980 پیکسل اگر عرض نمایشگر باشه٬ کدوم قسمتها مشکل دارند. استایل های جدید رو در محلی که در بالا مشخص کردم بنویسید.


    دوست عزیز٬ این یک توضیح خیلی کلی بود٬ بهتره تلاش و جستجو کنی تا بتونی به فوت و فن ریسپانسیو سازی تسلط پیدا کنی.
    بله من 2 روز دارم گوگل رو بالا و پایین میکنم و به این کدی که شما ذکر کردید رسیدم...اما بازم هر کاری میکنم...اگر اشتباه نکنم کد مدیا کوئری رو باید در یه فایل css جدا استایل بدم و بعد توی کد <head> فراخوانی کنم...
    که منم این کار ها رو میکنم ولی تغییری مشاهده نمیکنم!!!

    <link href="saw.css" type="text/css" rev="stylesheet" rel="stylesheet">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">


    این کدها درسته واسه مدیا?
    ویرایش توسط hamidrez4 : July 3rd, 2015 در ساعت 00:01

  6. #4
    عضو انجمن
    تاریخ عضویت
    Jul 2010
    نوشته ها
    361
    تشکر تشکر کرده 
    648
    تشکر تشکر شده 
    1,663
    تشکر شده در
    814 پست

    پیش فرض پاسخ : رسپانسیو قالب سایت

    نقل قول نوشته اصلی توسط hamidrez4 نمایش پست ها
    این کدها درسته واسه مدیا?
    دوست گرانقدر ، بین کلیه اتفاقات و دستوراتی که در طراحی وب استفاده میشه یک رابطه منطقی و منظمی وجود داره ؛

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

    کد:
    /* Smaller screens */
    
    
    @media only screen and (max-width: 1023px) {
        /* Enter Your Custom Styles Here */    
    }
    
    
    
    
    /* Mobile */
    
    
    @media handheld, only screen and (max-width: 767px) {
        /* Enter Your Custom Styles Here */    
    }
    
    
    
    
    @media only screen and (max-width : 480px) {  
        /* Enter Your Custom Styles Here */      
    } 
    
    
    @media only screen and (max-width : 320px) {  
        /* Enter Your Custom Styles Here */    
    }
    توضیحات به زبان انگلیسی خودش گویای مطلب هست ؛ ترجمه به فارسی:

    در بخش اول استایل هایی که باید برای صفحه نمایش با حداکثر عرض 1023 پیکسل هستند تعریف کنید ، مثلا:

    کد:
    body{width:80%;margin:0 auto}
    .div1 .div2{width:91.35%}
    مشخص می کنید مثلا عرض بدنه 80 درصد کل باشه یا دایو1 و دایو2 چه وضعیتی داشته باشند/

    ==================

    همین اتفاق به ترتیب تکرار میشه برای حداکثر عرض صفحه نمایش 767 پیکسل ، 480 پیکسل ، 320 پیکسل

    در نهایت باید آدرس فایلی css ، که این دستورات را در آن ثبت کردید ، فراخوانی کنید:

    کد:
    <link rel="stylesheet" href="css/responsive.css" type="text/css" media="all" />
    فقط کافیه کمی در ساختار کدها دقت کنید ، خودتون متوجه دستوراتی که باید بدید خواهید شد.
    ویرایش توسط iranian-portal : July 3rd, 2015 در ساعت 01:23

  7. تعداد تشکر ها ازiranian-portal به دلیل پست مفید


  8. #5
    عضو انجمن mojtaba05 آواتار ها
    تاریخ عضویت
    Apr 2015
    نوشته ها
    200
    تشکر تشکر کرده 
    120
    تشکر تشکر شده 
    164
    تشکر شده در
    140 پست

    پیش فرض پاسخ : رسپانسیو قالب سایت

    نقل قول نوشته اصلی توسط hamidrez4 نمایش پست ها
    بله من 2 روز دارم گوگل رو بالا و پایین میکنم و به این کدی که شما ذکر کردید رسیدم...اما بازم هر کاری میکنم...اگر اشتباه نکنم کد مدیا کوئری رو باید در یه فایل css جدا استایل بدم و بعد توی کد <head> فراخوانی کنم...
    که منم این کار ها رو میکنم ولی تغییری مشاهده نمیکنم!!!

    <link href="saw.css" type="text/css" rev="stylesheet" rel="stylesheet">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">


    این کدها درسته واسه مدیا?
    حتما نیازی نیست در یک فایل جدا قرار بدید٬ میشه در همون فایل استایل فعلی قالب هم اضافه کرد. viewport رو باید به <head> قالب اضافه کنید.

  9. تعداد تشکر ها از mojtaba05 به دلیل پست مفید


  10. #6
    عضو جدید partserver آواتار ها
    تاریخ عضویت
    Jan 2014
    محل سکونت
    تهران
    نوشته ها
    43
    تشکر تشکر کرده 
    127
    تشکر تشکر شده 
    31
    تشکر شده در
    27 پست

    پیش فرض پاسخ : رسپانسیو قالب سایت

    می تونید بدون اضافه کردن بخش @media فقط با استفاده از width و height بصورت درصدی قالب رو ریسپانسیو کنید که البته کمی دردسر داره ولی در نهایت خوب میشه. دقت کنید که در اکثر استایل ها {display:block;} و برای تصاویر {height:auto;} رو بکار ببرید.

    اگر خواستید پیام بدید تا نمونه اش رو براتون آموزش بدم.
    آیدی یاهو: part.server / شماره تماس: 09213826411
    میهن تونز \ |
    / جوم دیزاین \ | / پارت سرور

  11. تعداد تشکر ها از partserver به دلیل پست مفید


  12. #7
    عضو جدید
    تاریخ عضویت
    Nov 2013
    محل سکونت
    Tehran
    نوشته ها
    66
    تشکر تشکر کرده 
    22
    تشکر تشکر شده 
    36
    تشکر شده در
    33 پست

    پیش فرض پاسخ : رسپانسیو قالب سایت

    بهترین روش این که سایز ها رو روی 100% بزاری
    شرکت مهر گستران تابش شهرقدس (شماره ثبت : 462) دارای مجوز فعالیت و نماد اعتماد از وزارت صنعت، معدن و تجارت
    02191304832

  13. تعداد تشکر ها از mgtco به دلیل پست مفید


  14. #8
    عضو انجمن mojtaba05 آواتار ها
    تاریخ عضویت
    Apr 2015
    نوشته ها
    200
    تشکر تشکر کرده 
    120
    تشکر تشکر شده 
    164
    تشکر شده در
    140 پست

    پیش فرض پاسخ : رسپانسیو قالب سایت

    می تونید بدون اضافه کردن بخش @media فقط با استفاده از width و height بصورت درصدی قالب رو ریسپانسیو کنید که البته کمی دردسر داره ولی در نهایت خوب میشه. دقت کنید که در اکثر استایل ها {display:block;} و برای تصاویر {height:auto;} رو بکار ببرید.

    اگر خواستید پیام بدید تا نمونه اش رو براتون آموزش بدم.
    کار ریسپانسیو سازی پیچیده تر این این روشی است که شما فرمودید٬ فرض کنید بدنه اصلی قالب 980 پیکسله٬ شما اگر از مدیا کوئری استفاده نکنید٬ ناچارید اندازه های خود قالب را به درصد تبدیل کنید٬ اولا با این کار زحمت خودتون رو بیشتر کردید. دوما ریسپانسیو سازی که فقط تنظیم طول و عرض عناصر نیست. مثلا یکی از مواردی که باید برای نمایش قالب در موبایل در نظر داشت٬ اینه که ما در موبایل موس و در نتیجه hover نداریم. با توجه به این که تقریبا در بیشتر قالب ها منوهایی وجود داره (مثلا دسته‌بندی‌ها) که زیر منوی اونها با اشاره موس ظاهر میشن. تکلیف این زیر منوها در موبایل چیه؟ ما باید ترتیبی اتخاذ کنیم که کاربر موبایل نسبت به کار کامپیوتر هیچ چیزی رو از دست نده. این فقط یک مثال بود٬ موارد خیلی بیشتری وجود داره.

    بهترین روش این که سایز ها رو روی 100% بزاری
    ممکنه بیشتر در مورد این روش توضیح بفرمایید؟

  15. تعداد تشکر ها از mojtaba05 به دلیل پست مفید


  16. #9
    عضو جدید
    تاریخ عضویت
    Nov 2013
    محل سکونت
    Tehran
    نوشته ها
    66
    تشکر تشکر کرده 
    22
    تشکر تشکر شده 
    36
    تشکر شده در
    33 پست

    پیش فرض پاسخ : رسپانسیو قالب سایت

    بهترین روش استفاده از % در سایز هستش نه سایز ثابت!
    برای سایت یکی از دوستان تقریباً رسپانسیو هستش با این روش انجام دادیم و تست تو مانیتور های مختلف انجام دادیم
    bvb09.ir/index.php
    شرکت مهر گستران تابش شهرقدس (شماره ثبت : 462) دارای مجوز فعالیت و نماد اعتماد از وزارت صنعت، معدن و تجارت
    02191304832

  17. #10
    عضو انجمن mojtaba05 آواتار ها
    تاریخ عضویت
    Apr 2015
    نوشته ها
    200
    تشکر تشکر کرده 
    120
    تشکر تشکر شده 
    164
    تشکر شده در
    140 پست

    پیش فرض پاسخ : رسپانسیو قالب سایت

    نقل قول نوشته اصلی توسط mgtco نمایش پست ها
    بهترین روش استفاده از % در سایز هستش نه سایز ثابت!
    برای سایت یکی از دوستان تقریباً رسپانسیو هستش با این روش انجام دادیم و تست تو مانیتور های مختلف انجام دادیم
    bvb09.ir/index.php
    صفحه ای که آدرس دادید٬ ریسپانسیو نیست!

  18. تعداد تشکر ها ازmojtaba05 به دلیل پست مفید


صفحه 1 از 2 12 آخرینآخرین

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

موضوعات مشابه

  1. رسپانسیو سایت جوملایی رو چطور درست کنم؟
    توسط kurdcoffee در انجمن Joomla-Mambo
    پاسخ ها: 5
    آخرين نوشته: May 13th, 2017, 04:12
  2. پاسخ ها: 0
    آخرين نوشته: January 10th, 2017, 13:22
  3. رسپانسیو کردن سایت وردپرسی
    توسط mahdicivil در انجمن درخواست خدمات برنامه نویسی
    پاسخ ها: 15
    آخرين نوشته: June 28th, 2015, 15:39
  4. ادیت و رسپانسیو
    توسط AHF-victory در انجمن Wordpress
    پاسخ ها: 2
    آخرين نوشته: February 17th, 2015, 00:59

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •