رسپانسیو قالب سایت
سلام دوستان من یه قالب طراحی کردم و الان میخوام از کسانی که به رسپانسیو کردن قالب آشنایی دارن تقاضا کنم که به من آموزش بدن تا بتونم خودم رسپانسیو قالب رو انجام بدم...
من درباره یه سری کدها درباره این موضوع اطلاع کسب کردم مثل @media ...
ولی هر کاری میکنم رسپانسیو نمیشه!!!
پاسخ : رسپانسیو قالب سایت
سلام٬
گوگل و سایت‌های اینترنتی بهترین معلم برای شما خواهند بود. رایج‌ترین روش ریسپانسیو سازی استفاده از مدیا کوئری ها هستند٬ مثلا :
خب حالا در حالی که سایت رو در موزیلا دارید می بینید٬ کنترل٬ شیفت و ام رو همزمان بزنید و ببینید در اندازه مثلا 980 پیکسل اگر عرض نمایشگر باشه٬ کدوم قسمتها مشکل دارند. استایل های جدید رو در محلی که در بالا مشخص کردم بنویسید.کد:@media screen and (max-width: 980px){ استایل }
دوست عزیز٬ این یک توضیح خیلی کلی بود٬ بهتره تلاش و جستجو کنی تا بتونی به فوت و فن ریسپانسیو سازی تسلط پیدا کنی.
پاسخ : رسپانسیو قالب سایت
بله من 2 روز دارم گوگل رو بالا و پایین میکنم و به این کدی که شما ذکر کردید رسیدم...اما بازم هر کاری میکنم...اگر اشتباه نکنم کد مدیا کوئری رو باید در یه فایل css جدا استایل بدم و بعد توی کد <head> فراخوانی کنم...نوشته اصلی توسط mojtaba05
که منم این کار ها رو میکنم ولی تغییری مشاهده نمیکنم!!!
<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
پاسخ : رسپانسیو قالب سایت
دوست گرانقدر ، بین کلیه اتفاقات و دستوراتی که در طراحی وب استفاده میشه یک رابطه منطقی و منظمی وجود داره ؛
کدنویسی به خصوص در بخش استایل یا 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 پیکسل هستند تعریف کنید ، مثلا:
مشخص می کنید مثلا عرض بدنه 80 درصد کل باشه یا دایو1 و دایو2 چه وضعیتی داشته باشند/کد:body{width:80%;margin:0 auto} .div1 .div2{width:91.35%}
==================
همین اتفاق به ترتیب تکرار میشه برای حداکثر عرض صفحه نمایش 767 پیکسل ، 480 پیکسل ، 320 پیکسل
در نهایت باید آدرس فایلی css ، که این دستورات را در آن ثبت کردید ، فراخوانی کنید:
فقط کافیه کمی در ساختار کدها دقت کنید ، خودتون متوجه دستوراتی که باید بدید خواهید شد.کد:<link rel="stylesheet" href="css/responsive.css" type="text/css" media="all" />
ویرایش توسط iranian-portal : July 3rd, 2015 در ساعت 01:23
پاسخ : رسپانسیو قالب سایت
حتما نیازی نیست در یک فایل جدا قرار بدید٬ میشه در همون فایل استایل فعلی قالب هم اضافه کرد. viewport رو باید به <head> قالب اضافه کنید.
پاسخ : رسپانسیو قالب سایت
می تونید بدون اضافه کردن بخش @media فقط با استفاده از width و height بصورت درصدی قالب رو ریسپانسیو کنید که البته کمی دردسر داره ولی در نهایت خوب میشه. دقت کنید که در اکثر استایل ها {display:block;} و برای تصاویر {height:auto;} رو بکار ببرید.
اگر خواستید پیام بدید تا نمونه اش رو براتون آموزش بدم.
پاسخ : رسپانسیو قالب سایت
بهترین روش این که سایز ها رو روی 100% بزاری
شرکت مهر گستران تابش شهرقدس (شماره ثبت : 462) دارای مجوز فعالیت و نماد اعتماد از وزارت صنعت، معدن و تجارت
02191304832
پاسخ : رسپانسیو قالب سایت
کار ریسپانسیو سازی پیچیده تر این این روشی است که شما فرمودید٬ فرض کنید بدنه اصلی قالب 980 پیکسله٬ شما اگر از مدیا کوئری استفاده نکنید٬ ناچارید اندازه های خود قالب را به درصد تبدیل کنید٬ اولا با این کار زحمت خودتون رو بیشتر کردید. دوما ریسپانسیو سازی که فقط تنظیم طول و عرض عناصر نیست. مثلا یکی از مواردی که باید برای نمایش قالب در موبایل در نظر داشت٬ اینه که ما در موبایل موس و در نتیجه hover نداریم. با توجه به این که تقریبا در بیشتر قالب ها منوهایی وجود داره (مثلا دسته‌بندی‌ها) که زیر منوی اونها با اشاره موس ظاهر میشن. تکلیف این زیر منوها در موبایل چیه؟ ما باید ترتیبی اتخاذ کنیم که کاربر موبایل نسبت به کار کامپیوتر هیچ چیزی رو از دست نده. این فقط یک مثال بود٬ موارد خیلی بیشتری وجود داره.می تونید بدون اضافه کردن بخش @media فقط با استفاده از width و height بصورت درصدی قالب رو ریسپانسیو کنید که البته کمی دردسر داره ولی در نهایت خوب میشه. دقت کنید که در اکثر استایل ها {display:block;} و برای تصاویر {height:auto;} رو بکار ببرید.
اگر خواستید پیام بدید تا نمونه اش رو براتون آموزش بدم.
ممکنه بیشتر در مورد این روش توضیح بفرمایید؟بهترین روش این که سایز ها رو روی 100% بزاری
پاسخ : رسپانسیو قالب سایت
بهترین روش استفاده از % در سایز هستش نه سایز ثابت!
برای سایت یکی از دوستان تقریباً رسپانسیو هستش با این روش انجام دادیم و تست تو مانیتور های مختلف انجام دادیم
bvb09.ir/index.php
شرکت مهر گستران تابش شهرقدس (شماره ثبت : 462) دارای مجوز فعالیت و نماد اعتماد از وزارت صنعت، معدن و تجارت
02191304832
پاسخ : رسپانسیو قالب سایت
صفحه ای که آدرس دادید٬ ریسپانسیو نیست!
در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)
مجوز های ارسال و ویرایش
