تغییر margin بر اساس رزولوشن

[Behn4m]

سلام

لطفا راهی برای قرار دادن margin که با توجه به رزولوشن های مختلف صفحه نمایش تغییر کنه یاد بدین.
یعنی برای هر رزولوشن یک margin خاص در نظر گرفته بشه.

بطور مثال برای 768*1366 مقدار margin: 30px و برای 1080*1920 برابر 80px باشه.

ممنون

[بهزاد علی محمدزاده]

سلام . با media queries ها می تونید روی رزولوشن های مختلفی کار کنید .

[Behn4m]

سلام . با media queries ها می تونید روی رزولوشن های مختلفی کار کنید .

میشه بیشتر توضیح بدین؟؟

ممنون

[بهزاد علی محمدزاده]

@media only screen and (max-device-width: 1366px){
margin:30px;
}

@media only screen and (max-device-width: 1920px){
margin:80px;
}

به css3 اضافه شده . طراحی رسپانسیو رو با این روش انجام میدن ( معمولا ... ) ... و مثال بالا یه نمونه خیلی ساده است . منتهی برای کار کردن با این media queries می بایست اطلاعات بیشتری کسب کنید . و معمولا با درصد و محاسبات خاصی تنظیمات انجام میشه چون Device های متفاوت زیادی داریم .

[Behn4m]

از

<p style="margin-bottom:px;">در php برای ایجاد فاصله استفاده کردم.

با وارد کردن کدی که دادین تمام margin ها فرق میکنه؟؟ (چون فقط میخوام یک تعداد خاصی از margin ها به این صورت باشن)

اگه ممکنه در مورد استفاده از کدی که دادین بیشتر توضیح بدین. (اگه فرصت نیست میتونین منبع آموزش بدین تا مطالعه کنم ,چون سرچ کردم ولی اطلاعات زیادی پیدا نشد)

ممنون

[بهزاد علی محمدزاده]

ببینید این کد در فایل css نوشته میشه . بحث فرصت نیست نمی دونم چیکار می خوایم بکنی به همین خاطر سرنخ میدم بهت . مقاله انگلیسی (http://css-tricks.com/css-media-queries/) در وب هاب (http://webhub.ir/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-responsive-%D8%A8%D8%A7-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D8%A7%D8%B2-css3) هم شاید مقالاتی پیدا کنی .

اینکه میگید در php یعنی چی ؟ شما style دادی . و media queries رو می تونی تو همون style استفاده کنی . اون دستوری که من نوشتم میگه device هایی که حداکثر اندازه شون اینها هستند margin تغییر کنه و خودش رزولوشن یا device رو تشخیص میده . کد صحیح نیست فقط برای نمونه است . میگم که باید بشناسیدش چون رزولوشن با device هم فرق می کنه .

توی فروم هم رسپانسیو و یا responsive و یا واکنش گرا رو جستجو کن برای مطالب بیشتر .

[tamafi6]

سلام

لطفا راهی برای قرار دادن margin که با توجه به رزولوشن های مختلف صفحه نمایش تغییر کنه یاد بدین.
یعنی برای هر رزولوشن یک margin خاص در نظر گرفته بشه.

بطور مثال برای 768*1366 مقدار margin: 30px و برای 1080*1920 برابر 80px باشه.

ممنون

دوست عزیزرسپانسیو یعنی سایت دررزولیشن مورد نظرشما تابع قوانین جداگانه ای باشه فرقی نمیکنه فقط شماباید برای رزولیشن موردنظرخودتون جداگانه استایل بنویسیدمثل استایل اصلی سایت فقط باید فرم وچیدمان اون را هماهنگ با اندازه موردنظردربیارید
http://barnamenevis.org/showthread.php?392901-%E2%80%8F%E2%80%8E(%E2%80%8E%E2%80%8Eresponsive)%E 2%80%8EMedia-query%D9%87%D8%A7

[Behn4m]

ممنون بابت راهنمایی خوبتون.

برای کساییکه میخوان این کار رو انجام بدن:

1. یک فایل css بسازین و در اون کد:


/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

وارد کنین.

و

میتونین رزولوشن مورد نظر خودتون رو اضافه کنین. بطور مثال:


/* Desktops and laptops with higher width ----------- */
@media only screen
and (min-width : 1560px) {
/* Styles */
}

2. وارد کردن کد:


@import url(address);

در style.css

بجای address محل ذخیره فایل css ای که ساختین قرار بدین. مثلا css/style/mediaquery.css

3. با توجه به قسمت 1 بجای /* Styles */ کد مورد نظر خودتون رو وارد کنین تا با توجه به رزولوشن ها یا دستگاهی که مشخص شده کد مورد نظرتون فعال بشه.