CSS-də Media Sorğularına Giriş
Müxtəlif kodu ekran genişliyindən asılı olaraq
icra etməyə imkan verən xüsusi bir @media
komandası var.
Aşağıdakı nümunədə, ekran genişliyi 300px ilə
1200px arasında olduqda bəzi kod işləyəcək:
@media (min-width: 300px) and (max-width: 1200px) {
/* bəzi kod */
}
Aşağıdakı nümunədə, ekran genişliyi 300px-dan
çox olduqda bəzi kod işləyəcək:
@media (min-width: 300px) {
/* bəzi kod */
}
Aşağıdakı nümunədə, ekran genişliyi 1200px-dan
az olduqda bəzi kod işləyəcək:
@media (max-width: 1200px) {
/* bəzi kod */
}
Gəlin media sorğumuzda bir növ kod yazaq. Məsələn, müəyyən ekran ölçülərində abzasları qırmızı rəngə boyayaq:
@media (min-width: 300px) and (max-width: 1200px) {
p {
color: red;
}
}
@media (min-width: 300px) and (max-width: 1200px) {
p {
color: red;
}
}
İndi isə ekran genişliyindən asılı olaraq abzasları müxtəlif rənglərə boyayaq:
@media (max-width: 300px) {
p {
color: red;
}
}
@media (min-width: 300px) and (max-width: 900px) {
p {
color: green;
}
}
@media (min-width: 900px) and (max-width: 1200px) {
p {
color: blue;
}
}
@media (min-width: 1200px) {
p {
color: orange;
}
}
Aşağıdakı kodun 0 ilə 800px arası
genişlikdə olan ekranda tətbiq olunmasını təmin edin:
p {
font-size: 20px;
}
Aşağıdakı kodun isə 800px və daha çox
genişlikdə olan ekranda tətbiq olunmasını təmin edin:
p {
font-size: 30px;
}
Aşağıdakı kodun 0 ilə 500px arası
genişlikdə olan ekranda tətbiq olunmasını təmin edin:
p {
font-size: 15px;
}
Aşağıdakı kodun 500px ilə 900px arası
genişlikdə olan ekranda tətbiq olunmasını təmin edin:
p {
font-size: 20px;
}
Aşağıdakı kodun 900px və daha çox
genişlikdə olan ekranda tətbiq olunmasını təmin edin:
p {
font-size: 30px;
}