طراحی قالب ریسپانسیو با مدیا کوئری

[130000]

سلام عزیزان امیدوارم حالتون خوب باشه و هر جا که هستید موفق و سربلند باشید.

چند تا سوال راجب طراحی ریسپانسیو دارم که ممنون میشم اگه راهنماییم کنید.

1- معمولا در طراحی قالب ریسپانسیو برای چه ابعادی (عرض دستگاه) استایل نوشته میشه؟؟؟ مثلا 1024*768

2- چطور مدیا کوئری ای بنویسم که مثلا اگه عرض صفحه 400 پیکسل شد فلان استایل رو بگیره؟؟؟

3- و چطوری مدیا کوئری بنویسم که عرض صفحه اگه بین 400 تا 600 پیکسل بود فلان استایل رو بگیره؟؟؟

لطفا برای سوال 2 و 3 مثالی از نحوه نوشتن کد به همراه توضیح بذارید خیلی ممنون.

[ABZiko]

1. این که در چه اندازه هایی قالبتون رو رسپانسیو کنید بستگی به خودتون داره ولی می تونید لیست سایز ها رو در اینجا ببینید :
http://www.w3schools.com/browsers/browsers_display.asp
2. این رو می تونید با max-width و min-width بنویسید ولی می تونید فقط یک عرض رو هم براش مشخص کنید برای مثلا


@media (width:400px){}

3. این رو باید با min و max بنویسید :


@media (min-width:400px) and (max-width:600px){}


در این دو قسمت شما ابتدا مشخص می کنید عرض صفحه چقدر باشه و بعدش مشخص می کنید که استایل ها داخلشون چطور باشه :


@media (width:400px){

header{

width:100px}

}


برای مثال توی همین کد یعنی در عرض 400px تگ هدر برابر 100px باشه، همین!:چشمک:

[manoto1371]

سلام
بهتره از فریمورک هایی مثل بوت استرپ استفاده کنید.

[130000]

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

[دانیال دزفولی]

سوالاتتون جواب گرفتن؟

[130000]

ABZiko (http://barnamenevis.org/member.php?339374-ABZiko) ممنون از کمکت
یک سوال این کد مدیا کوئری رو تو سی اس اس می نویسن درسته؟؟؟

اگه بخوام برای هر دستگاه جدا بنویسم و استایل جدایی داشته باشه در قسمت head چطوری بهشون لینک بدم؟؟؟
مثلا دستگاهی با عرض 300 بود فلان استایل رو اجرا کنه و یا بین این دو عرض 400 و 600 بود فلان استایل رو اجرا کنه جوری که هر دستگاه نسبت به عرض خودش کد خودش رو اجرا کنه .
طریقه لینک دادنش یا شرط دادنش به چه صورته؟؟؟

[ABZiko]

بله مشکلی نداره، اگر هم می خواین به فایل های متفاوت لینک بدین این صفحه برای شما مناسبه و کاملا روش شرط گذاشتن رو توضیح داده :
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
صفتی داره تگ link به نام media که می تونید شرطتون رو داخلش بنویسید.:چشمک:

[130000]

باز ممنون و یک سوال دیگه
متا تگ


<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">

و متا تگ


<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

و


<meta name="HandheldFriendly" content="true">

در طراحی ریسپانسیو استفاده میشه کاراییش چیه؟؟؟ میشه توضیح بدید؟؟؟ ممنون

[130000]

و یک سوال دیگه :خجالت:

البته بخاطر خودت اینهمه سوال میپرسما میپرسم که یه موقع فراموش نکنی . :لبخند:

در طراحی ریسپانسیو از چه اندازه های استفاده میکنن؟؟؟ مثلا px % em و ...

اگه چیزی غیر از این سوالات هست که من نمیدونم لطفا بگید...

[godofphp]

باز ممنون و یک سوال دیگهمتا تگ
و متا تگ
و
در طراحی ریسپانسیو استفاده میشه کاراییش چیه؟؟؟ میشه توضیح بدید؟؟؟ ممنوناین تگ به مرورگر اعلام میکنه که طول و عرض و یا حالا هر چیزی که مربوط میشه به حالت نمایش سایت ، اون رو با خصوصیات دیوایس لود کن مثلا عرض رو نسبت به عرض دستگاه که میخاد لپتاپ باشه گوشی باشه یا تبلت یا هر چیز دیگه , متناسب کن اینم خصوصیت های این تگ همراه با توضیحاتشون : width The width of the virtual viewport of the device.device-width The physical width of the device's screen.height The height of the "virtual viewport" of the device.device-height The physical height of the device's screen.initial-scale The initial zoom when visiting the page. 1.0 does not zoom.minimum-scale The minimum amount the visitor can zoom on the page. 1.0 does not zoom.maximum-scale The maximum amount the visitor can zoom on the page. 1.0 does not zoom.user-scalable Allows the device to zoom in and out. Values are yes or no.استفاده از اینها هم به این شکله

[vimax23]

و یک سوال دیگه :خجالت:

البته بخاطر خودت اینهمه سوال میپرسما میپرسم که یه موقع فراموش نکنی . :لبخند:

در طراحی ریسپانسیو از چه اندازه های استفاده میکنن؟؟؟ مثلا px % em و ...

اگه چیزی غیر از این سوالات هست که من نمیدونم لطفا بگید...

دوست عزیز مدیاکوئری رو بهتره از دریم ویور استفاده کنی خودش ابعاد دیفالتو داره و با مکس ویدت و مین ویدت میتونی مشخص کنی مدیاکوئری روی چه رزلویشن هایی لود بکنه
fliud grid layout رو از منوی فایل بزن ، خودش ابعاد استاندارد همراه با جی اس و سی اس اس میسازه
تنها کاری که باید بکنی اینه استایل سازی کنی واسه هر رزلویشن
خیلی ساده هست اگر بلد نیستی یوتیوب همینو سرچ کن برات آموزش میاره

[mmdsharifi]

فکر کنم مشکل شما باید گرید سیستم رسپانسیو حل میشه.
در طراحی رسپانسیو از % برای گرید بندی استفاده می شه و برای فونت ها از em
http://www.responsivegridsystem.com/calculator/

[130000]

ممنون فیلم رو پیداش کردم ...

[130000]

فکر کنم مشکل شما باید گرید سیستم رسپانسیو حل میشه.
در طراحی رسپانسیو از % برای گرید بندی استفاده می شه و برای فونت ها از em
http://www.responsivegridsystem.com/calculator/

طرز کار با این سایت چجوریه؟؟؟

[ABZiko]

سلام، دوستان جوابتون رو دادن ، در مورد این سوال آخری باید بگم این سایت مشخص می کنه که در یک سطر چند تا ستون قرار بگیره، مثلا اگر سایتتون سه ستونه است شما می تونید مشخص کنید که 3 تا ستون داشته باشه و با margin هم فاصله بین ستون ها رو مشخص می کنید.:چشمک:

[سینا اکبری]

بوت استرپ خوبه ولی به نظرم خیلی بده
من با مدیا کوئری راحتم و از کتاب زیر وسایت زیر یاد گرفتم.
دانلود کتاب
(http://zomigi.com/downloads/CSS3-Media-Queries-Responsive-Design_STC-Summit_120523.pdf)
آدرس سایت (http://docs.webplatform.org/wiki/tutorials/media_queries)

اینارو تا اخر بخون فول میشی

[ABZiko]

چرا بوت استرپ خوبه ولی به نظرتون بده!؟

[سینا اکبری]

چرا بوت استرپ خوبه ولی به نظرتون بده!؟

من کلا منظورم نبود.برای من بده چون به نظرم سخته و سنگینتر میکنه سایت رو و اومدیمو تو یه سایتمون یکسری المان جدید داشتیم ،با بوت استرپ مگه میشه اونو ریسپانسیو کرد؟
بعدش وقتی آدم خودش با مدیا کوئری طراحی میکنه از همه چیزش کاملا سر در میاره و میتونه هر کاری میخواد بعدن ویرایش کنه.
البته من با بوت استرپ خیلی کار نکردم شاید اشتباه بگم ولی چند نفری هم همین رو میگن

[ABZiko]

احتمالا اون چند نفر بلد نبودن که با هاش کار کنن و گرنه که خیلی راحت و سریع هست.

[سینا اکبری]

احتمالا اون چند نفر بلد نبودن که با هاش کار کنن و گرنه که خیلی راحت و سریع هست.

هرکس نظر خودشو داره.
درضمن مدیاکوئری اصولی تره ،پایه بوت استرپ هم همینه:لبخندساده:

[ABZiko]

ولی bootstrap دقیق تر و راحت تره!! شما توی مدیا کوئری باید وقت بزاری تمام عناصر رو بچینی، ولی وقتی bootstrap خود شراحت این کار رو انجام می ده دیگه چه نیازی به مدیا کوئری ؟

[130000]

در بوت استرپ کدهای زیادی به کار رفته که زیادیهاش به کار ما نمیاد و مجبور به حذفشونیم در کل بوت استرپ برای کسانی مناسبه که از برنامه نویسی وب سر در نمیارن و دوست دارن سایت خودشون رو خودشون بسازن و ...
از نظر من مدیا کوئری خیلی بهتر از بوت استرپ هستش.