CSS Media Query

Ang CSS2 ay nagpasimula ng pagtataglay ng uri ng media...

Ang CSS2 ay nagpasimula ng pagtataglay ng... @media Ang patakaran, na nagbibigay ng kapabilidad na mag-define ng iba't ibang estilo ng patakaran para sa iba't ibang uri ng media.

Halimbawa: Maaring mayroon kang isang grupo ng estilo ng patakaran para sa kompyuter na skreen, isang grupo para sa printer, isang grupo para sa handheld na aparato, kahit na mayroon pang isang grupo para sa telebisyon, at iba pa.

Sa kabiguan, ang mga uri ng media type na ito ay hindi naging malawak na suportado ng device maliban sa mediatype ng pagprint.

Ang CSS3 ay nagpasimula ng media query

Ang media query sa CSS3 ay pinagsama-sama ang konsepto ng CSS2 media types: hindi sila naghahanap sa uri ng device, kundi sa kakayahan ng device.

Ang media query ay maaaring gamitin upang suriin maraming bagay, tulad ng:

  • Width and height of the viewport
  • Width and height of the device
  • Orientation (kung ang tablet o mobile phone ay nasa landscape o portrait mode)
  • Resolution

Ang paggamit ng media query ay isang popular na teknolohiya na maaring magbigay ng personalisadong stylesheet sa desktop, laptop, tablet at mobile phone (halimbawa iPhone at Android phone).

Browser Support

Ang mga numero sa talahanayan ay nagtutukoy sa ganap na suporta @media Ang unang bersyon ng browser na sumusulong ang alituntunin.

Property
@media 21.0 9.0 3.5 4.0 9.0

Media Query Syntax

Ang media query ay binubuo ng isang uri ng media at maaring may isang o ilang mga expression, na maaaring maisalin sa true o false.

@media not|only mediatype and (expressions) {
  CSS-Code;
{}

Kung ang tinukoy na mediatype ay tumutugma sa uri ng device na nagpapakita ng dokumento at lahat ng mga expression sa media query ay true, ang resulta ng query ay true. Kapag ang media query ay true, ang naaangkop na stylesheet o style rules ay gagamitin at sinunod ang mga alituntunin ng normal na kasunduan.

Maliban na lamang kung gumagamit ka ng operator na not o only, ang mediatype ay opsyonal at ayon sa pagkakakabit. all Types.

Maaari mo ring gamitin iba't ibang stylesheet para sa iba't ibang media:

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

CSS3 Media Types

Value Description
all Ginagamit para sa lahat ng uri ng media device.
print Ginagamit para sa printer.
screen Ginagamit para sa kompyuter na screen, tablet, smartphone at iba pa.
speech Ginagamit para sa malakas na pagbasa ng pahina ng screen reader.

Simple na halimbawa ng media query

Isang paraan upang gamitin ang media query ay magkaroon ng alternatibong bahagi ng CSS sa stylesheet.

Ang halimbawa sa ibaba ay magbabago ang kulay ng background sa liwanag na luntian kapag ang lapad ng viewport ay 480 pixel o mas malaki (kung ang viewport ay mas maliit sa 480 pixel, ang kulay ng background ay magiging kulay ng kulay):

实例

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  {}
{}

Try It Yourself

Isang halimbawa na ipinapakita ang isang menu, kung ang lapad ng viewport ay 480 pixel o mas malaki, ang menu ay magiging paglipat sa kaliwa ng pahina (kung ang viewport ay mas maliit sa 480 pixel, ang menu ay magiging itaas ng nilalaman):

实例

@media screen and (min-width: 480px) {
  #leftsidebar {width: 200px; float: left;}
  #main {margin-left: 216px;}
{}

Try It Yourself

More Media Query Examples

For more media query examples, please visit the next page:CSS MQ Example.

CSS @media Reference Manual

For a complete overview of all media types and properties/expressions, please see our CSS Reference @media Rule.