Responsive Web Design - Media Query

Ano ang media query?

Ang media query ay isang teknolohiya ng CSS na idinagdag sa CSS3.

Ginagamit lamang kapag nakakonting sa mga tiyak na kondisyon @media At mga alituntunin upang tumutukoy sa bloke ng attribute ng CSS.

Eksemplo

Kapag ang lapad ng window ng browser ay 600px o mas maliit, ang kulay ng background ay maging liwanag na asul:

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Try It Yourself

Magdagdag ng tuldok ng pagbago

Sa mas maagang bahagi ng tutorial na ito, gumawa kami ng isang pahina na may mga linya at kolum, ngunit ang responsibleng pahina na ito ay walang magandang epekto sa maliliit na screen.

Ang media query ay makakatulong sa iyo. Maaari kaming magdagdag ng isang tuldok ng pagbago kung saan ang ilang bahagi ng disenyo ay magiging iba sa bawat gilid ng tuldok ng pagbago.


Computer sa mesa

Mobleng

Magdagdag ng tuldok ng pagbago gamit ang media query sa 768px:

Eksemplo

Kapag ang lapad ng screen (window ng browser) ay mas maliit sa 768px, ang lapad ng bawat kolum ay dapat ay 100%:

/* Para sa mga desktop device: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media only screen and (max-width: 768px) {
  /* Para sa mobile: */
  [class*="col-"] {
    width: 100%;
  }
}

Try It Yourself

Palaging mobile first design

Mobile First ay nangangahulugan na bago magdisenyo ng mga desktop o anumang iba pang aparato, dapat muna disenyo ang mobile device (ito ay gagawing mas mabilis ang pagsasalita ng pahina sa mas maliit na aparato).

Ito nangangahulugan na kailangan nating gumawa ng ilang pagbabago sa CSS.

Kapag ang lapad ay mas maliit sa 768px, dapat nating baguhin ang disenyo sa halip na baguhin ang lapad. Ginawa namin ito sa disenyo na 'mobile first':

Eksemplo

/* Para sa mobile: */
[class*="col-"] {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  /* Para sa desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

Try It Yourself

Isang ibang tuldok ng pagbago

Maaari mong idagdag anumang bilang ng tuldok ng pagbago.

Naisip namin na magdagdag ng isang tuldok ng pagbago sa pagitan ng tablet at mobleng.


Computer sa mesa

Tablet

Mobleng

Para ito, nagdagdag kami ng isang media query (sa 600 pixel), at nagdagdag ng isang grupo ng bagong klase para sa mga aparato na mas malaki sa 600 pixel (pero mas maliit sa 768 pixel):

Eksemplo

Huwag kalimutan, ang dalawang klase ay halos magkapareho, ang tanging pagkakaiba ay ang pangalan (col- at col-s-):

/* Para sa mobile: */
[class*="col-"] {
  width: 100%;
}
@media only screen and (min-width: 600px) {
  /* Para sa tablet: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
  /* Para sa desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

May dalawang magkaparehong klase na may halimbawa ay medyo kakaiba, ngunit nagbibigay ng pagkakataon sa amin na gamitin ang HTML upang magdesisyon kung anong mangyayari sa bawat punto ng pagbubukas ng sulok:

Mga halimbawa ng HTML

Para sa desktop:

Ang unang at ikatlong bahagi ay magtatagpo ng 3 sulok. Ang gitnang bahagi ay magtatagpo ng 6 sulok.

Para sa tablet:

Unang bahagi ay magtatagpo ng 3 sulok, ikalawang bahagi ay magtatagpo ng 9 sulok, ang ikatlong bahagi ay magpakita sa ilalim ng unang at ikalawang bahagi at magtatagpo ng 12 sulok:

<div class="row">
  <div class="col-3 col-s-3">...</div>
  <div class="col-6 col-s-9">...</div>
  <div class="col-3 col-s-12">...</div>
</div>

Try It Yourself

Tipikal na breakpoint ng aparato

Ang mga screen at aparato na may magkakaibang taas at lapad ay marami, kaya mahirap gumawa ng eksaktong breakpoint para sa bawat aparato. Para sa pagkakaroon ng simpleng breakpoint, puwede kang targetin ang limang grupo na ito:

Eksemplo

/* Masyadong maliit na aparato (telepono, 600px o mas maliit) */
@media only screen and (max-width: 600px) {...} 
/* Maliit na aparato (vertical tablet at malaking mobile phone, 600 pixel o mas malaki) */
@media only screen and (min-width: 600px) {...} 
/* Medyo malaking aparato (horizontal tablet, 768 pixel o mas malaki) */
@media only screen and (min-width: 768px) {...} 
/* Malaking aparato (laptop/desktop, 992px o mas malaki) */
@media only screen and (min-width: 992px) {...} 
/* Malaking aparato (malaking laptop at desktop, 1200px o mas malaki) */
@media only screen and (min-width: 1200px) {...}

Try It Yourself

Direksyon: Likha / Panorama

Maaari ring gamitin ang media query upang baguhin ang layout ng pahina ayon sa direksyon ng browser.

Maaari kang itakda ang isang grupo ng attribute ng CSS, na ang mga ito lamang ay gumagamit kapag ang lapad ng window ng browser ay mas malaki kaysa sa taas, na tinatawag na 'landscape' direksyon:

Eksemplo

Kung ang direksyon ay landscape mode, ang background ng web page ay light blue:

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

Try It Yourself

I-itago ang elemento gamit ang media query

Isa pang pangkaraniwang paggamit ng media query ay ang pag-itago ng elemento sa iba't ibang sukat ng screen:

Eksemplo

/* Kung ang sukat ng screen ay 600 pixel o mas maliit, itago ang elemento na ito */
@media only screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

Try It Yourself

I-modify ang font gamit ang media query

Maaari ka ring gamitin ang media query upang baguhin ang sukat ng font ng mga elemento sa iba't ibang sukat ng screen:

Eksemplo

/* Kung ang sukat ng screen ay 601px o mas malaki, i-set ang font-size ng <div> sa 80px */
@media only screen and (min-width: 601px) {}}
  div.example {
    font-size: 80px;
  }
}
/* If the screen size is 600px or smaller, set the font-size of <div> to 30px */
@media only screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

Try It Yourself

CSS @media Reference Manual

For a complete overview of all media types and features/expressions, please see See @media Rule in CSS Reference Manual.