Մեդիա հարցումներ

Արձագանքող դիզայն-ը կայքի պատրաստաման այնպիսի ստրատեգիա է, երբ կայքը արձագանքում է դիտարկիչի չափերին և սարքին որի վրա պիտի ցուցադրվի։ Այս ստրատեգիան օգնում է , ոչ միայն տեղավորել կայքը շատ փոքր սարքերի մոնիտորների վրա, այլև տալ սարքի առանձնահատկություններին համապատասխանող տարբեր արտապատկերումներ։

Մեդիա հարցումներ-ը ամենահզոր գործիքն են այս անելու համար։ Արի վերցնենք մեր տոկոսներով էջատումը և այն ձևափոխենք։ Արդյունքում պիտի ստանանք այնպես, որ պատուհանի փոքր լայնության դեպքում, էջատումը կարտապատկերվի մեկ սյունակով և մենյուն կհայտնվի վերևի մասում։ Հաշվի առ, որ մեծ չափի պատուհանների համար, տեսքը կմնա նույնը։

@media screen and (min-width:600px) {
  nav {
    float: left;
    width: 25%;
  }
  section {
    margin-left: 25%;
  }
}
@media screen and (max-width:599px) {
  nav li {
    display: inline;
  }
}

Տադադադաաաամ! Հիմա մեր էջատումը լավ է երևում նաև մոբայլ դիտարկիչներում։ Այստեղ կա որոշ հայտնի կայքերի ցուցակ, որոնք օգտագործում են մեդիահարցումները այս եղանակով։

Սա անհամեմատ ավելին է, քան դու կարող ես անել min-width և max-width օգտագործելով։ Ավելին կարդա MDN փաստաթղթերում։