CSS-ի մեդիահարցումների ներածություն

Գոյություն ունի հատուկ հրաման @media, որը թույլ է տալիս կատարել տարբեր կոդ կախված էկրանի լայնությունից:

Հաջորդ օրինակում որոշակի կոդ կգործի, եթե էկրանի լայնությունը 300px-ից մինչև 1200px:

css@media (min-width: 300px) and (max-width: 1200px) {
  /* որոշակի կոդ */
}

Հաջորդ օրինակում որոշակի կոդ կգործի, եթե էկրանի լայնությունը 300px-ից մեծ է:

css@media (min-width: 300px) {
  /* որոշակի կոդ */
}

Հաջորդ օրինակում որոշակի կոդ կգործի, եթե էկրանի լայնությունը 1200px-ից փոքր է:

css@media (max-width: 1200px) {
  /* որոշակի կոդ */
}

Եկեք գրենք մեր մեդիահարցման մեջ ինչ-որ կոդ: Օրինակ, էկրանի որոշակի չափսերի դեպքում ներկենք պարբերությունները կարմիր գույնով:

css@media (min-width: 300px) and (max-width: 1200px) {
  p {
    color: red;
  }
}

@media (min-width: 300px) and (max-width: 1200px) {
  p {
    color: red;
  }
}

Իսկ այժմ ներկենք պարբերությունները տարբեր գույներով կախված էկրանի լայնությունից:

css@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;
  }
}

cssp {
  font-size: 20px;
}

cssp {
  font-size: 30px;
}

cssp {
  font-size: 15px;
}

cssp {
  font-size: 20px;
}

cssp {
  font-size: 30px;
}