CSS Media Query - Halimbawa

CSS Media Query - Maraming Halimbawa

Pukawin natin ang mas maraming halimbawa ng paggamit ng media query.

Ang media query ay isang sikat na teknolohiya na ginagamit upang ipasa ang personalisadong stylesheet sa iba't ibang device.

Nagpakita ng isang simpleng halimbawa, palitan natin ang kulay ng background ng iba't ibang device:

CSS Media Query

Mga halimbawa

/* Itatakpan ang kulay ng background ng body bilang tan */
body {
  background-color: tan;
}
/* Sa mas maliit o katumbas ng 992 pixel na screen, itatakpan ang kulay ng background ng blue */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}
/* Sa 600 pixel o mas maliit na screen, itatakpan ang kulay ng background ng olive */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}

Try It Yourself

Nais mong malaman kung bakit kami ay tinitingnan ng tumpak ang 992px at 600px? Ito ang tinatawag nating 'tipikal na puwang' ng device (typical breakpoints). Makakita ka nito sa aming Responsive Web Design Tutorial Makilala ang mas marami pang kaalaman tungkol sa tipikal na puwang ng pagbubuod sa Chinese Simplified.

Media query ng menu

Sa halimbawa na ito, gumagamit kami ng media query upang gumawa ng responsive navigation menu, na magiging iba't iba ang laki sa iba't ibang laki ng screen.

Malaking screen:

Maliit na screen:

Mga halimbawa

/* Container ng navbar */
.topnav {
  overflow: hidden;
  background-color: #333;
}
/* Link ng Navbar */
.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* Sa mga screen na may laki ng 600 pixel o mas maliit, ipapakita ang mga link ng menu na magkalapit, hindi magkakasunod-sunod */
@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

Try It Yourself

Media query ng column

Isa pang pangkaraniwang paggamit ng media query ay ang paglikha ng flexible layout. Sa halimbawa na ito, nilikha namin ang isang layout na nagbabago sa apat na column, dalawang column at full-width column, depende sa iba't ibang laki ng screen:

Malaking screen:

Medyo malaking screen:

Maliit na screen:

Mga halimbawa

/* Paglikha ng apat na magkapantay na column na magkalapit sa isa't isa */
.column {
  float: left;
  width: 25%;
}
/* Sa mga screen na may 992px o mas maliit, maging dalawang column mula sa apat na column */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}
/* Sa mga screen na may laki ng 600 pixel o mas maliit, ipapakita ang mga column na magkalapit, hindi magkakasunod-sunod */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Try It Yourself

Tip:mas modernong paraan ng paglikha ng layout ng column ay gamit ang CSS Flexbox (tingnan ang halimbawa sa ibaba). Subalit, ang Internet Explorer 10 at mas lumang bersyon ay hindi ito sumusuporta. Kung kailangan ng suporta para sa IE6-10, gamitin ang floating (tingnan ang itaas).

Kung gusto mong matuto ng mas maraming kaalaman tungkol sa layout module ng flexible box, matuto namin sa CSS Flexbox ito na kabanata.

Kung gusto mong matuto ng mas maraming kaalaman tungkol sa responsive web design, matuto namin sa aming Responsive Web Design Tutorial.

Mga halimbawa

/* Container ng flexible box */
.row {
  display: flex;
  flex-wrap: wrap;
}
/* paglikha ng apat na magkapantay na column */
.column {
  flex: 25%;
  padding: 20px;
}
/* Sa mga screen na may 992px o mas maliit, maging dalawang column mula sa apat na column */
@media screen and (max-width: 992px) {
  .column {
    flex: 50%;
  }
}
/* Sa mga screen na may laki ng 600 pixel o mas maliit, ipapakita ang mga column na magkalapit, hindi magkakasunod-sunod */
@media screen and (max-width: 600px) {
  .row {
    flex-direction: column;
  }
}

Try It Yourself

Pagtataliwalag ng mga elemento gamit ang media query

Isa pang pangkaraniwang paggamit ng media query ay ang pagtataliwalag ng mga elemento sa iba't ibang laki ng screen:

Itago ko ang elemento sa maliit na laya.

Mga halimbawa

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

Try It Yourself

Baguhin ang font size gamit ang media query

Maaari mo ring gamitin ang media query upang baguhin ang font size ng elemento sa iba't ibang laki ng screen:

Variable font size.

Mga halimbawa

/* Kapag ang laki ng laya ng screen ay higit sa 600 pixel, itakda ang font size ng <div> na 80 pixel */
@media screen and (min-width: 600px) {
  div.example {
    font-size: 80px;
  }
}
/* Kapag ang laki ng laya ng screen ay 600 pixel o mas maliit, itakda ang font size ng <div> na 30 pixel */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

Try It Yourself

Flexible image gallery

Sa kasong ito, gagamitin namin ang media query kasama ang flexbox upang gumawa ng responsive image gallery:

Mga halimbawa

Try It Yourself

Flexible website

Sa kasong ito, gagamitin namin ang media query kasama ang flexbox upang gumawa ng responsive website, na may flexible navigation bar at flexible content.

Mga halimbawa

Try It Yourself

Direksyon: Portrait / Landscape

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

Maaari mong itakda ang isang grupo ng CSS attribute, na ang mga ito lamang ay magiging magamit kapag ang lapad ng window ng browser ay mas malaki kaysa sa taas, na kilala bilang landscape mode:

Mga halimbawa

Kung ang direksyon ay nasa landscape mode, gamitin ang lightblue na background color:

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

Try It Yourself

Pinakamaliit na lapad hanggang pinakamalaking lapad

Maaari mo ring gamitin ang mga attribute na max-width at min-width upang itakda ang pinakamaliit at pinakamalaking lapad.

Halimbawa, kapag ang lapad ng laya ng browser ay 600 hanggang 900 pixel, baguhin ang anyo ng <div> elemento:

Mga halimbawa

@media screen and (max-width: 900px) and (min-width: 600px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

Try It Yourself

Gamit ang halaga ng dagdag: Sa mga sumusunod na halimbawa, ginagamit namin ang kumita (katulad ng operator na OR) upang idagdag ang dagdag na media query sa umiiral na media query:

Mga halimbawa

/* Kapag ang lapad ng laya ay 600 hanggang 900 pixel o higit sa 1100 pixel - baguhin ang anyo ng <div> */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

Try It Yourself

CSS @media Reference Manual

Kompleto na paglalarawan ng lahat ng uri ng media type at pagkakayari/expression, tingnan ang CSS Reference @media Rule.

Tip:Para sa mas maraming kaalaman tungkol sa responsive web design (paano magtarget ng iba't ibang devices at screens), at paggamit ng media query breakpoints, basahin ang aming Responsive Web Design Tutorial.