PDA

توجه ! این یک نسخه آرشیو شده میباشد و در این حالت شما عکسی را مشاهده نمیکنید برای مشاهده کامل متن و عکسها بر روی لینک مقابل کلیک کنید : سوال در مورد @media در سی اس اس



SaeedFazlollahzadeh
August 5th, 2017, 14:13
سلام
یه المانی توی صفحه داریم که با سی اس اس تنظیم شده
حالا می خوام این عنصر رو تعیین کنم که توی هر صفحه نمایش چجوری نشون داده بشه

مثلا اگه عرض صفحه 50 پیکسل بود، فلان property فلان value رو داشته باشه
بعد همون کلاس تو عرض 60 فلان باشه

با این دستور خواستم جلو برم اما خب درست نبوده

@media (max-width:50px;) {
.felan {
top:20px;
}
}
@media(max-width:60px;) {
.felan {
top: 15px;
}
}
یه پنج شش تا عرض مختلف رو به این شکل و پشت سر هم تست کردم، و همین شکلی هم یک بار جای همه ی max ها min نوشتم که بشه min-width، اما مشکلی که بود این بوده که فقط یکی از کدها رو روی همه ی عرض ها انجام می داده

اینم ممنون میشم راهنمایی کنید

یه چیزی که به ذهنم رسیده الان:
مثلا برای عرض بین 50 تا 60، باید هم max استفاده کنم و هم min که از عرض 50 تا 60 رو فلان شکل نشون بده، بعد از 50 به پایین تر جور دیگه باشه و 60 به بالاتر هم یه شکل دیگه؟
درسته؟

تشکر

data20
August 5th, 2017, 17:41
سلام
تازمانی که role خاص صحیح باشه عمل مورد نظر رخ میده و نیازی به استفاده هم زمان (min max) نیست به طور مثال
https://jsfiddle.net/hadwxk4g/

mojtaba05
August 5th, 2017, 18:20
سلام،
ترتیب قرارگیری هم تاثیر داره.
اگر از یک سلکتور یکسان استفاده کنید، استایلی که پایین تر (آخرتر) هست، اجرا میشه.
در مثال زیر سه تا کویری نوشتم،
اولی وقتی اجرا میشه که صفحه نمایش بزرگتر از 1200 هست
دومی وقتی که صفحه کوچکتر از 1200 هست
سومی وقتی که صفحه کوچکتر از 980 هست

اگه جای کویری ها رو تغییر بدید و مثلا کویری سوم رو بیارید بالای کویری دوم، دیگه کویری سوم (980) اثر خودش رو از دست میده:



<!DOCTYPE html>
<html>
<head>
<style>
@media screen and (min-width: 1201px){
div::before {
content: "صفحه بزرگتر از 1201 پیکسل است.";
}
}
@media screen and (max-width: 1200px){
div::before {
content: "صفحه کوچکتر از 1200 پیکسل است.";
}
}
@media screen and (max-width: 980px){
div::before {
content: "صفحه کوچکتر از 980 پیکسل است.";
}
}
</style>
</head>
<body></body>
</html>


دمو:
https://jsfiddle.net/sabeti05/krs1jnce/1/

persiandroid
August 5th, 2017, 18:27
سلام
یه المانی توی صفحه داریم که با سی اس اس تنظیم شده
حالا می خوام این عنصر رو تعیین کنم که توی هر صفحه نمایش چجوری نشون داده بشه

مثلا اگه عرض صفحه 50 پیکسل بود، فلان property فلان value رو داشته باشه
بعد همون کلاس تو عرض 60 فلان باشه

با این دستور خواستم جلو برم اما خب درست نبوده

@media (max-width:50px;) {
.felan {
top:20px;
}
}
@media(max-width:60px;) {
.felan {
top: 15px;
}
}
یه پنج شش تا عرض مختلف رو به این شکل و پشت سر هم تست کردم، و همین شکلی هم یک بار جای همه ی max ها min نوشتم که بشه min-width، اما مشکلی که بود این بوده که فقط یکی از کدها رو روی همه ی عرض ها انجام می داده

اینم ممنون میشم راهنمایی کنید

یه چیزی که به ذهنم رسیده الان:
مثلا برای عرض بین 50 تا 60، باید هم max استفاده کنم و هم min که از عرض 50 تا 60 رو فلان شکل نشون بده، بعد از 50 به پایین تر جور دیگه باشه و 60 به بالاتر هم یه شکل دیگه؟
درسته؟

تشکر

نیازی به min-width و یا max-width نیست، به این شکل استفاده کنید:


@media (min-width: 50px)
.container {
width: 15px;
}


@media (min-width: 60px)
.container {
width: 20px;
}

SaeedFazlollahzadeh
August 6th, 2017, 00:51
تشکر از همه

هم تفاوت max و min رو قشنگ متوجه شدم و هم این که متوجه اشتباهم شدم
اشتباهم همون رعایت نکردن ترتیب بوده توی اندازه ها

مرسی