-
August 5th, 2017, 14:13
#1
عضو انجمن
سوال در مورد @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 به بالاتر هم یه شکل دیگه؟
درسته؟
تشکر
-
-
August 5th, 2017 14:13
# ADS
-
August 5th, 2017, 17:41
#2
عضو انجمن
پاسخ : سوال در مورد @media در سی اس اس
سلام
تازمانی که role خاص صحیح باشه عمل مورد نظر رخ میده و نیازی به استفاده هم زمان (min max) نیست به طور مثال
https://jsfiddle.net/hadwxk4g/
If you do what you've always done, you'll always get the same result
Life is too short to be normal ! Stay Weird
-
تعداد تشکر ها از data20 به دلیل پست مفید
-
August 5th, 2017, 18:20
#3
عضو انجمن
پاسخ : سوال در مورد @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/
ویرایش توسط mojtaba05 : August 5th, 2017 در ساعت 18:22
-
تعداد تشکر ها از mojtaba05 به دلیل پست مفید
-
August 5th, 2017, 18:27
#4
عضو جدید
پاسخ : سوال در مورد @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;
}
ویرایش توسط persiandroid : August 5th, 2017 در ساعت 18:29
-
تعداد تشکر ها از persiandroid به دلیل پست مفید
-
August 6th, 2017, 00:51
#5
عضو انجمن
پاسخ : سوال در مورد @media در سی اس اس
تشکر از همه
هم تفاوت max و min رو قشنگ متوجه شدم و هم این که متوجه اشتباهم شدم
اشتباهم همون رعایت نکردن ترتیب بوده توی اندازه ها
مرسی
-
پاسخ با نقل قول
