-
عضو جدید
رسپانسیو قالب سایت
سلام دوستان من یه قالب طراحی کردم و الان میخوام از کسانی که به رسپانسیو کردن قالب آشنایی دارن تقاضا کنم که به من آموزش بدن تا بتونم خودم رسپانسیو قالب رو انجام بدم...
من درباره یه سری کدها درباره این موضوع اطلاع کسب کردم مثل @media ...
ولی هر کاری میکنم رسپانسیو نمیشه!!!
-
-
July 2nd, 2015 19:04
# ADS
-
عضو انجمن
پاسخ : رسپانسیو قالب سایت
سلام٬
گوگل و سایتهای اینترنتی بهترین معلم برای شما خواهند بود. رایجترین روش ریسپانسیو سازی استفاده از مدیا کوئری ها هستند٬ مثلا :
کد:
@media screen and (max-width: 980px){
استایل
}
خب حالا در حالی که سایت رو در موزیلا دارید می بینید٬ کنترل٬ شیفت و ام رو همزمان بزنید و ببینید در اندازه مثلا 980 پیکسل اگر عرض نمایشگر باشه٬ کدوم قسمتها مشکل دارند. استایل های جدید رو در محلی که در بالا مشخص کردم بنویسید.
دوست عزیز٬ این یک توضیح خیلی کلی بود٬ بهتره تلاش و جستجو کنی تا بتونی به فوت و فن ریسپانسیو سازی تسلط پیدا کنی.
-
تعداد تشکر ها از mojtaba05 به دلیل پست مفید
-
عضو جدید
پاسخ : رسپانسیو قالب سایت
نوشته اصلی توسط
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
-
-
پاسخ : رسپانسیو قالب سایت
نوشته اصلی توسط
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
-
تعداد تشکر ها ازiranian-portal به دلیل پست مفید
-
عضو انجمن
پاسخ : رسپانسیو قالب سایت
نوشته اصلی توسط
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> قالب اضافه کنید.
-
تعداد تشکر ها از mojtaba05 به دلیل پست مفید
-
عضو جدید
پاسخ : رسپانسیو قالب سایت
می تونید بدون اضافه کردن بخش @media فقط با استفاده از width و height بصورت درصدی قالب رو ریسپانسیو کنید که البته کمی دردسر داره ولی در نهایت خوب میشه. دقت کنید که در اکثر استایل ها {display:block;} و برای تصاویر {height:auto;} رو بکار ببرید.
اگر خواستید پیام بدید تا نمونه اش رو براتون آموزش بدم.
-
تعداد تشکر ها از partserver به دلیل پست مفید
-
پاسخ : رسپانسیو قالب سایت
بهترین روش این که سایز ها رو روی 100% بزاری
شرکت مهر گستران تابش شهرقدس (شماره ثبت : 462) دارای مجوز فعالیت و نماد اعتماد از وزارت صنعت، معدن و تجارت
02191304832
-
تعداد تشکر ها از mgtco به دلیل پست مفید
-
عضو انجمن
پاسخ : رسپانسیو قالب سایت
می تونید بدون اضافه کردن بخش @media فقط با استفاده از width و height بصورت درصدی قالب رو ریسپانسیو کنید که البته کمی دردسر داره ولی در نهایت خوب میشه. دقت کنید که در اکثر استایل ها {display:block;} و برای تصاویر {height:auto;} رو بکار ببرید.
اگر خواستید پیام بدید تا نمونه اش رو براتون آموزش بدم.
کار ریسپانسیو سازی پیچیده تر این این روشی است که شما فرمودید٬ فرض کنید بدنه اصلی قالب 980 پیکسله٬ شما اگر از مدیا کوئری استفاده نکنید٬ ناچارید اندازه های خود قالب را به درصد تبدیل کنید٬ اولا با این کار زحمت خودتون رو بیشتر کردید. دوما ریسپانسیو سازی که فقط تنظیم طول و عرض عناصر نیست. مثلا یکی از مواردی که باید برای نمایش قالب در موبایل در نظر داشت٬ اینه که ما در موبایل موس و در نتیجه hover نداریم. با توجه به این که تقریبا در بیشتر قالب ها منوهایی وجود داره (مثلا دستهبندیها) که زیر منوی اونها با اشاره موس ظاهر میشن. تکلیف این زیر منوها در موبایل چیه؟ ما باید ترتیبی اتخاذ کنیم که کاربر موبایل نسبت به کار کامپیوتر هیچ چیزی رو از دست نده. این فقط یک مثال بود٬ موارد خیلی بیشتری وجود داره.
بهترین روش این که سایز ها رو روی 100% بزاری
ممکنه بیشتر در مورد این روش توضیح بفرمایید؟
-
تعداد تشکر ها از mojtaba05 به دلیل پست مفید
-
پاسخ : رسپانسیو قالب سایت
بهترین روش استفاده از % در سایز هستش نه سایز ثابت!
برای سایت یکی از دوستان تقریباً رسپانسیو هستش با این روش انجام دادیم و تست تو مانیتور های مختلف انجام دادیم
bvb09.ir/index.php
شرکت مهر گستران تابش شهرقدس (شماره ثبت : 462) دارای مجوز فعالیت و نماد اعتماد از وزارت صنعت، معدن و تجارت
02191304832
-
-
July 3rd, 2015, 14:12
#10
عضو انجمن
پاسخ : رسپانسیو قالب سایت
نوشته اصلی توسط
mgtco
بهترین روش استفاده از % در سایز هستش نه سایز ثابت!
برای سایت یکی از دوستان تقریباً رسپانسیو هستش با این روش انجام دادیم و تست تو مانیتور های مختلف انجام دادیم
bvb09.ir/index.php
صفحه ای که آدرس دادید٬ ریسپانسیو نیست!
-
تعداد تشکر ها ازmojtaba05 به دلیل پست مفید