نمایش نسخه قابل چاپ
سلام دوستان من یه قالب طراحی کردم و الان میخوام از کسانی که به رسپانسیو کردن قالب آشنایی دارن تقاضا کنم که به من آموزش بدن تا بتونم خودم رسپانسیو قالب رو انجام بدم...
من درباره یه سری کدها درباره این موضوع اطلاع کسب کردم مثل @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
کدنویسی به خصوص در بخش استایل یا 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" />
حتما نیازی نیست در یک فایل جدا قرار بدید٬ میشه در همون فایل استایل فعلی قالب هم اضافه کرد. viewport رو باید به <head> قالب اضافه کنید.نقل قول:
نوشته اصلی توسط hamidrez4
می تونید بدون اضافه کردن بخش @media فقط با استفاده از width و height بصورت درصدی قالب رو ریسپانسیو کنید که البته کمی دردسر داره ولی در نهایت خوب میشه. دقت کنید که در اکثر استایل ها {display:block;} و برای تصاویر {height:auto;} رو بکار ببرید.
اگر خواستید پیام بدید تا نمونه اش رو براتون آموزش بدم.
بهترین روش این که سایز ها رو روی 100% بزاری
کار ریسپانسیو سازی پیچیده تر این این روشی است که شما فرمودید٬ فرض کنید بدنه اصلی قالب 980 پیکسله٬ شما اگر از مدیا کوئری استفاده نکنید٬ ناچارید اندازه های خود قالب را به درصد تبدیل کنید٬ اولا با این کار زحمت خودتون رو بیشتر کردید. دوما ریسپانسیو سازی که فقط تنظیم طول و عرض عناصر نیست. مثلا یکی از مواردی که باید برای نمایش قالب در موبایل در نظر داشت٬ اینه که ما در موبایل موس و در نتیجه hover نداریم. با توجه به این که تقریبا در بیشتر قالب ها منوهایی وجود داره (مثلا دسته‌بندی‌ها) که زیر منوی اونها با اشاره موس ظاهر میشن. تکلیف این زیر منوها در موبایل چیه؟ ما باید ترتیبی اتخاذ کنیم که کاربر موبایل نسبت به کار کامپیوتر هیچ چیزی رو از دست نده. این فقط یک مثال بود٬ موارد خیلی بیشتری وجود داره.نقل قول:
می تونید بدون اضافه کردن بخش @media فقط با استفاده از width و height بصورت درصدی قالب رو ریسپانسیو کنید که البته کمی دردسر داره ولی در نهایت خوب میشه. دقت کنید که در اکثر استایل ها {display:block;} و برای تصاویر {height:auto;} رو بکار ببرید.
اگر خواستید پیام بدید تا نمونه اش رو براتون آموزش بدم.
ممکنه بیشتر در مورد این روش توضیح بفرمایید؟نقل قول:
بهترین روش این که سایز ها رو روی 100% بزاری
بهترین روش استفاده از % در سایز هستش نه سایز ثابت!
برای سایت یکی از دوستان تقریباً رسپانسیو هستش با این روش انجام دادیم و تست تو مانیتور های مختلف انجام دادیم
bvb09.ir/index.php
صفحه ای که آدرس دادید٬ ریسپانسیو نیست!نقل قول:
نوشته اصلی توسط mgtco
بخشی از این سایت توسط بنده رسپانسیو شدهنقل قول:
نوشته اصلی توسط mojtaba05
حال خبرندارم چون مدام در حال تغییر بوده
اگر شک دارید یک صفحه بعنوان نمونه براتون بسازم :d
تنها چیزی که در اون صفحه به نظر میرسه روی واکنشگرایی اون کار شده٬ اسلایدشو است که اون هم فقط عرضش متانسب با صفحه تغییر می کنه و چون ارتفاعش ثابته٬ هر چه نمایشگر کابر کوچکتر باشه٬ تناسب ابعاد اون بیشتر به هم می خوره.:)
روش درصد رو تمام عرض ها تاثیر داره؟
auto چطور؟
آموزش اصول طراحی قالب واکنش گرا Responsive
http://www.webhostingtalk.ir/attachm...id=26984&stc=1http://www.webhostingtalk.ir/attachm...id=26985&stc=1http://www.webhostingtalk.ir/attachm...id=26986&stc=1