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

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

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

@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;
  }
}
<div class="container">
<section>

Փոքրացրու դիտարկիչդ և տես ինչ հավես է ստացվել։

</section>
<section>

Lorem Ipsum-ը տպագրության և տպագրական արդյունաբերության համար նախատեսված մոդելային տեքստ է: Սկսած 1500-ականներից` Lorem Ipsum-ը հանդիսացել է տպագրական արդյունաբերության ստանդարտ մոդելային տեքստ, ինչը մի անհայտ տպագրիչի կողմից տարբեր տառատեսակների օրինակների գիրք ստեղծելու ջանքերի արդյունք է: Այս տեքստը ոչ միայն կարողացել է գոյատևել հինգ դարաշրջան, այլև ներառվել է էլեկտրոնային տպագրության մեջ` մնալով էապես անփոփոխ: Այն հայտնի է դարձել 1960-ականներին Lorem Ipsum բովանդակող Letraset էջերի թողարկման արդյունքում, իսկ ավելի ուշ համակարգչային տպագրության այնպիսի ծրագրերի թողարկման հետևանքով, ինչպիսին է Aldus PageMaker-ը, որը ներառում է Lorem Ipsum-ի տարատեսակներ:

</section>

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

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

Հավելյալ

Կարող ես էջատումներդ ավելի լավը դարձնել օգտագործելով meta viewport-ը.

  • Creative Commons License