سوال در مورد @media در سی اس اس
سلام
یه المانی توی صفحه داریم که با سی اس اس تنظیم شده
حالا می خوام این عنصر رو تعیین کنم که توی هر صفحه نمایش چجوری نشون داده بشه
مثلا اگه عرض صفحه 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 به بالاتر هم یه شکل دیگه؟
درسته؟
تشکر
پاسخ : سوال در مورد @media در سی اس اس
سلام
تازمانی که role خاص صحیح باشه عمل مورد نظر رخ میده و نیازی به استفاده هم زمان (min max) نیست به طور مثال
https://jsfiddle.net/hadwxk4g/
پاسخ : سوال در مورد @media در سی اس اس
سلام،
ترتیب قرارگیری هم تاثیر داره.
اگر از یک سلکتور یکسان استفاده کنید، استایلی که پایین تر (آخرتر) هست، اجرا میشه.
در مثال زیر سه تا کویری نوشتم،
اولی وقتی اجرا میشه که صفحه نمایش بزرگتر از 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/
پاسخ : سوال در مورد @media در سی اس اس
نقل قول:
نوشته اصلی توسط
SaeedFazlollahzadeh
سلام
یه المانی توی صفحه داریم که با سی اس اس تنظیم شده
حالا می خوام این عنصر رو تعیین کنم که توی هر صفحه نمایش چجوری نشون داده بشه
مثلا اگه عرض صفحه 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;
}
پاسخ : سوال در مورد @media در سی اس اس
تشکر از همه
هم تفاوت max و min رو قشنگ متوجه شدم و هم این که متوجه اشتباهم شدم
اشتباهم همون رعایت نکردن ترتیب بوده توی اندازه ها
مرسی
