အခန်းခံ ပြင်ပတင်ချက်

CSS ဂရိုဏ်း စာရင်း

စီစ်ဆိုင်ရာ အချက်အလက်

ရွေးချယ် သင်တန်း

ပြသထား သည့် အကြောင်း

CodeW3C.com ဘောင်း

CSS @media အခြေခံ

အရှေ့လိုက်ပိုင်း max-width
နောက်လိုက်ပိုင်း min-block-size

အသုံးပြုခြင်း နှင့် ကျမ်းကို

@media အခြေခံ အမိန့် သည် မီဒီယာ အစီအစဉ် တွင် မီဒီယာ အမျိုးအစား / ကိရိယာ အတွက် အမျိုးအစား သုံးစွဲ ပုံစံ ကို အသုံးပြု သည်

မီဒီယာ အစီအစဉ် ကို အသုံးပြု၍ များပြားသော အကြောင်းအရာ ကို စစ်ဆေး နိုင် သည်။

အစီအစဉ် အကျယ် နှင့် အမြင့်
ပစ္စည်း အကျယ် နှင့် အမြင့်
စီးဆင်း (ဖိုလှုပ် ကား သို့မဟုတ် ပုံထုတ် ကား အတွက် တူတွဲ တဲ့ အခြေအနေ)
လက်တင်

မီဒီယာ အစီအစဉ် ကို အသုံးပြုခြင်း သည် တိကျသော နည်းပညာ တစ်ခု ဖြစ်ပြီး ဒိခြိုက် ကား၊ ကွန်ဗွီ အက်တီဗွီ၊ ပုံထုတ် ကား နှင့် ဖိုလှုပ် ကား အတွက် အသုံးပြု ပြီး ပြောင်းလဲ သော ပုံစံ စာတမ်း (အပြန်အလိုက် ဝတ္ထု စာကြိုးစား ဒီပလိုက်) ကို ပြင်ဆင် ပြီးပြီ

သင် မီဒီယာ အစီအစဉ် ကို အသုံးပြု၍ ပုံစံ တခုခု ကို သုံးစွဲ ပြီး သတင်းသို့ ပို့စ်ကူး တိုက်ရိုက် သုံးစွဲ ပြီး အသံကူး သတင်းကူး တွေ အတွက် သုံးစွဲ ပြီးပြီ (မီဒီယာအမျိုးအစား: ပုံထုတ်ရေး၊ အသံကူး၊ သတင်းကူး)

除了媒体类型之外，还有媒体特性。媒体特性通过允许测试用户代理或显示设备的具体特性，为媒体查询提供了更多特定细节。例如，您可以将样式仅应用于大于或小于特定宽度的屏幕。

另请参阅：

CSS 教程：စက်စလင်း ပြောင်းလဲ

CSS 教程：CSS 媒体查询实例

RWD 教程：通过媒体查询实现响应式 Web 设计

JavaScript 参考手册：window.matchMedia() 方法

实例

例子 1

如果浏览器窗口的宽度为 600px 或更小时，把元素的背景颜色更改为“浅蓝色”：

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

ကိုယ်တိုင် ကိုယ်တိုင် ကိုယ်တိုင် ကိုယ်တိုင် သုံးစွဲပါ

အောက်ပိုင်းပြုပြီး အခြား TIY အမှတ်အသားများ ကို တွေ့ရပါ

CSS ဘာသာစကား

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

not, only နှင့် and သတ္တုပတိုင်း အချက်အလက်

not: not သတ္တုပတိုင်း သည် စက်တန့်အစုံးအစား အချက်အလက် ကို ကျန်ရှိသော အချက်အလက် ကို ပြန်လည်ဖော်ပြပါ

only: only သတ္တုပတိုင်း သည် အရှိန်ကျသော ဘာသာပြန်လာစက် သည် အသုံးပြုသော အချက်အလက် ကို အသုံးပြုသည်၊ အသုံးပြုသူ ဘာသာပြန်လာစက် သည် အချက်အလက် ကို အသုံးပြုခြင်း မပြုပါ

and: and သတ္တုပတိုင်း သည် စက်တန့်အချက်အလက် နှင့် စက်တန့်အမျိုးအစား သို့မဟုတ် အခြား စက်တန့်အချက်အလက် ကို ပေါင်းစပ်ပါ

သတ္တုပတိုင်းများ အရ မည်သည့် စက်တန့်ကို အသုံးပြုပါ၊ သို့သော် သတ္တုပတိုင်း သို့မဟုတ် သီးခြား စက်တန့်ကို အသုံးပြုလျှင် စက်တန့်အမျိုးအစား ကို တမ်းပြုပါ

အသုံးပြုနိုင်သော စက်တန့်များ အရ မည်သည့် စက်တန့်ကို အသုံးပြုပါတယ်၊ အသို့မဟုတ် အဆိုပါအချက်အလက်များ

<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
...

စက်တန့်အမျိုးအစား

တန်ဖိုး	ဖော်ပြ
all	မည်သည့် စက်တန့်အမျိုးအစား ကို အသုံးပြုသော မည်သည့် စက်တန့်ကို အသုံးပြုပါ
print	စက်တန့်ကြည့်တင်သည့် စက်တန့်ကို အသုံးပြုပါ
screen	အက်တိုကျူးဆိုက် စက်တန့်၊ ပုံစံတန့်၊ အသံအသံကို ကိုင်တွယ်ကို အသုံးပြုနိုင်သော စက်တန့်များအတွက်
speech	စက်တန့်ကြည့်တင်သည့် စက်တန့်ကို အသုံးပြုပါ

စက်တန့်အချက်အလက်

တန်ဖိုး	ဖော်ပြ
any-hover	အသုံးပြုနိုင်သော ဝင်ရိုးစက်များ အရ အသုံးပြုသူ (မိုးစက်တန့်တို့ကို) အခြေခံအဆင်းပြင် ပေါက်ကြားနိုင်သလား？ Media Queries Level 4 တွင် ထပ်ထည့်ထားပါသည်။
any-pointer	အသုံးပြုနိုင်သော ဝင်ရိုးစက်များ အရ မည်သည့် စက်တန့်ကို ရှိမည် ဖြစ်ပါသလား၊ ရှိပါက သူ၏ တိကျစွာဖြစ်သလား？ Media Queries Level 4 တွင် ထပ်ထည့်ထားပါသည်။
aspect-ratio	视口（viewport）的宽高比。
color	输出设备每个像素的比特值，常见的有 8、16、32 位。如果设备不支持输出彩色，则该值为 0。
color-gamut	用户代理和输出设备大致程度上支持的色域。 Media Queries Level 4 တွင် ထပ်ထည့်ထားပါသည်။
color-index	输出设备的颜色查询表（color lookup table）中的条目数量。如果设备不使用颜色查询表，则该值为 0。
device-aspect-ratio	输出设备的宽高比。已在 Media Queries Level 4 中被弃用。
device-height	输出设备渲染表面（如屏幕）的高度。已在 Media Queries Level 4 中被弃用。
device-width	输出设备渲染表面（如屏幕）的宽度。已在 Media Queries Level 4 中被弃用。
display-mode	应用程序的显示模式，如 web app 的 manifest 中的 display 成员所指定在 Web App Manifest spec 被定义。
forced-colors	检测是用户代理否限制调色板。 Media Queries Level 5 တွင် ထပ်ထည့်ထားပါသည်။
grid	输出设备使用网格屏幕还是点阵屏幕？
height	视口（viewport）的高度。
hover	主输入机制是否允许用户将鼠标悬停在元素上？ Media Queries Level 4 တွင် ထပ်ထည့်ထားပါသည်။
inverted-colors	ဘတ်ရှား သို့မဟုတ် အခြေခံ အုပ်ချုပ် စက် အပေါ် အကွက် အမြင့်ဆုံး အချိန်အတွက်。 Media Queries Level 5 တွင် ထပ်ထည့်ထားပါသည်။
light-level	လောကုံး အပူချိန် အခြေခံ အခြေအနေ。 Media Queries Level 5 တွင် ထပ်ထည့်ထားပါသည်။
max-aspect-ratio	ပြသ အပေါ် အကျယ်အဝန်း အကျယ်အတွက် နှင့် အရှည် အဆုံးဆုံး နှုန်းများ အကြား အမြင့်ဆုံး နှုန်း。
max-color	ထုတ်သွင်း အချက်အလက် အပေါ် အကွက် အမြင့်ဆုံး အချိန်အတွက်。
max-color-index	အသုံးပြု အချက်အလက် အပေါ် အကျယ်အဝန်း အမြင့်ဆုံး အရှည်အတွက်。
max-height	ပြသ အပေါ် အကျယ်အဝန်း အမြင့်ဆုံး အရှည်အတွက်။ ဥပမာ၊ ဘတ်ရှား ဝင်းကျင်း။
max-monochrome	ပုံစံ ကျသူ များ အပေါ် အကျယ်အဝန်း အမြင့်ဆုံး အကွက် အချိန်အတွက်。
max-resolution	设备的最大分辨率，使用 dpi 或 dpcm。
max-width	ပြသ အပေါ် အကျယ်အဝန်း အနည်းဆုံး အကျယ်အတွက်။ ဥပမာ၊ ဘတ်ရှား ဝင်းကျင်း။
min-aspect-ratio	ပြသ အပေါ် အကျယ်အဝန်း အနည်းဆုံး အနှံထား နှင့် အရှည် အဆုံးဆုံး နှုန်းများ အကြား အနည်းဆုံး နှုန်း。
min-color	ထုတ်သွင်း အချက်အလက် အပေါ် အကွက် အနည်းဆုံး အချိန်အတွက်。
min-color-index	အသုံးပြု အချက်အလက် အပေါ် အကျယ်အဝန်း အနည်းဆုံး အရှည်အတွက်。
min-height	ပြသ အပေါ် အကျယ်အဝန်း အနည်းဆုံး အရှည်အတွက်။ ဥပမာ၊ ဘတ်ရှား ဝင်းကျင်း။
min-monochrome	ပုံစံ ကျသူ များ အပေါ် အကျယ်အဝန်း အနည်းဆုံး အကွက် အချိန်အတွက်。
min-resolution	အခြား အရာတခု ကို အသုံးပြုပါ။
အခြား အရာတခု ကို အသုံးပြုပါ။	min-width
အခြား အရာတခု ကို အသုံးပြုပါ။	monochrome အခြား အရာတခု ကို အသုံးပြုပါ။
orientation	အခြား အရာတခု ကို အသုံးပြုပါ။
overflow-block	အခြား အရာတခု ကို အသုံးပြုပါ။ Media Queries Level 4 တွင် ထပ်ထည့်ထားပါသည်။
overflow-inline	အခြား အရာတခု ကို အသုံးပြုပါ။ Media Queries Level 4 တွင် ထပ်ထည့်ထားပါသည်။
pointer	ဘာသာစကား အခြား အရာတခု ကို အသုံးပြုပါ။ Media Queries Level 4 တွင် ထပ်ထည့်ထားပါသည်။
prefers-color-scheme	အသုံးပြုသူ က အရောင် အစိတ်အစိတ် အစိတ်အစိတ် ကို အသုံးပြုပါ။ Media Queries Level 5 တွင် ထပ်ထည့်ထားပါသည်။
prefers-contrast	အသုံးပြုသူ က အရောင် အချင်းအား ပြင်းပြီး ပိုမို အသုံးပြုပါ။ Media Queries Level 5 တွင် ထပ်ထည့်ထားပါသည်။
prefers-reduced-motion	အသုံးပြုသူ က စားသောက် ကို ပိုမို နှင်းပါက အသုံးပြုပါ။ Media Queries Level 5 တွင် ထပ်ထည့်ထားပါသည်။
prefers-reduced-transparency	အသုံးပြုသူ က နှစ်ဆူ အမြဲတမ်း ကို ရှိပါက အသုံးပြုပါ။ Media Queries Level 5 တွင် ထပ်ထည့်ထားပါသည်။
resolution	ရောင်ဆိုင်း အချင်းအား ထုတ်ပြန်ပါ။
scan	ရောင်ဆိုင်းခြင်း ပြီး အခြား ပုံစံတွင် အသုံးပြုပါသည်။
scripting	လော့ဘက် ကို အသုံးပြုနိုင်ခြင်း ကို စစ်ဆေးပါ။ Media Queries Level 5 တွင် ထပ်ထည့်ထားပါသည်။
update	ရောင်ဆိုင်းခြင်း အချိန် Media Queries Level 4 တွင် ထပ်ထည့်ထားပါသည်။
width	လုပ်ငန်းရှိ ဘာသာပြန်ပုံ

ပိုမိုသော အကျိုးသမား

လုပ်ငန်း 2

ဘာသာစကား 600 ပုံအချင်း သို့ သွားကြားပါက အရာတခုကို ကျယ်ပြီးပါ။

@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

ကိုယ်တိုင် ကိုယ်တိုင် ကိုယ်တိုင် ကိုယ်တိုင် သုံးစွဲပါ

လုပ်ငန်း 3

လုပ်ငန်းပွဲရာ 800 ပုံအချင်း သို့ ပိုမို သွားကြားပါက ဗဟိုသွင်းအော်ချမ်းသန်းခြင်း ကို အသုံးပြုပါ၊ 400 ပုံအချင်း မှ 799 ပုံအချင်း အကြား သွားကြားပါက ဗဟိုသွင်းအော်ချမ်းသန်းခြင်း ကို အသုံးပြုပါ၊ 400 ပုံအချင်း ထက် ပိုသွားကြားပါက ဗဟိုသွင်းအော်ချမ်းသန်းခြင်း အသုံးမပြုပါဘူး။

body {
  background-color: lightblue;
}
@media screen and (min-width: 400px) {
  body {
    background-color: lightgreen;
  }
}
@media screen and (min-width: 800px) {
  body {
    background-color: lavender;
  }
}

ကိုယ်တိုင် ကိုယ်တိုင် ကိုယ်တိုင် ကိုယ်တိုင် သုံးစွဲပါ

နာမည် 4

ပြည်ပြည် ကိုယ်စားပြု လက်အောက်ပုံ ပုံစံ ကို ဖွဲ့စည်းပါ (အကြား ပြင်ပြင် ကိုယ်စားပြု ပုံစံ ပြည်ပြည် ပြုလုပ်ပါ):

@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

ကိုယ်တိုင် ကိုယ်တိုင် ကိုယ်တိုင် ကိုယ်တိုင် သုံးစွဲပါ

အမှတ် 5

ပုံစံကြောင်းစာ ကြောင်းစာ ကို အသုံးပြုပြီး ဘလင်္ကံ အချက်အလက် အချက်အလက် ပြုလုပ်ပါ:

/* 992 ပိုင်တာ သို့မဟုတ် ပိုသော အစိတ်အခံ အခြေခံပုံစံ တွင် - ဘလင်္ကံ အချက်အလက် အချက်အလက် ကို ကြားချဉ်းဖြင့် စီးရီးပါ */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}
/* 600 ပိုင်တာ ထက် ပိုသော အစိတ်အခံ အခြေခံပုံစံ တွင် - အချက်အလက် အချက်အလက် ကို ကြားချဉ်းဖြင့် စီးရီးပါ */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

ကိုယ်တိုင် ကိုယ်တိုင် ကိုယ်တိုင် ကိုယ်တိုင် သုံးစွဲပါ

အမှတ် 6

ပုံစံကြောင်းစာ ကြောင်းစာ ကို အသုံးပြုပြီး အိမ်ဝှိုင်း ပြည်ပြည် ပြုလုပ်ပါ:

ကိုယ်တိုင် ကိုယ်တိုင် ကိုယ်တိုင် ကိုယ်တိုင် သုံးစွဲပါ

အမှတ် 7

ပုံစံကြောင်းစာ ကြောင်းစာ ကို ဘရပ်လာတာ အခြေခံပုံစံ အခြေခံပုံစံ ပြုလုပ်ပါ (ဘရပ်လာတာ အခြေခံပုံစံ အခြေခံပုံစံ ပြုလုပ်ပါ):

လျှို့ဝှက် စိတ်ပုံ အခြေခံပုံစံ တွင် ဖြစ်ပါက - ပြင်ပြင် အော်ချို အကြောင်းအရာ ကို အသုံးပြုပါ:

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

ကိုယ်တိုင် ကိုယ်တိုင် ကိုယ်တိုင် ကိုယ်တိုင် သုံးစွဲပါ

အမှတ် 8

ပုံစံကြောင်းစာ ကို ပုံစံကြောင်းစာ ကို အသုံးပြုပြီး ပြင်ပြင် အော်ချို အကြောင်းအရာ ကို အသုံးပြုပါ (ပုံစံကြောင်းစာ ကို ပြင်ပြင် အော်ချို အကြောင်းအရာ ကို အသုံးပြုပါ):

@media screen {
  body {
    color: green; 
  }
}
@media print {
  body {
    color: black; 
  }
}

ကိုယ်တိုင် ကိုယ်တိုင် ကိုယ်တိုင် ကိုယ်တိုင် သုံးစွဲပါ

အမှတ် 9

ကြားချဉ်းဖြင့် ပေါင်းစပ်ထားသော စာရင်း: ကြားချဉ်းဖြင့် တခုခုသော ပုံစံကို ကြားချဉ်းဖြင့် ထပ်ထည့်ပါ (သူ၏ ပုံစံ သဘောတူညီသော OR အမှတ်သား):

/* အကြား 600px နှင့် 900px အကြား သို့မဟုတ် 1100px ထက် အကြား အစိတ်အခံတွင် - <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;
  }
}

ကိုယ်တိုင် ကိုယ်တိုင် ကိုယ်တိုင် ကိုယ်တိုင် သုံးစွဲပါ

ဘရပ်လာတာ ထောက်ပံ့

ဘတ်မြုပ်တွင်ရှိသော နေရာတွင် သုံးစွဲသော @media အခြေခံပုံစံကို ထောက်ပံ့သော ဘရပ်လာတာကို လက်တွေ့ သုံးစွဲပါ။

Chrome	IE / Edge	Firefox	Safari	Opera
21	9	3.5	4.0	9

အရှေ့လိုက်ပိုင်း max-width
နောက်လိုက်ပိုင်း min-block-size

CodeW3C.com တွင် ပြုလုပ်ထားသော အခြေခံ အသုံးပြုခြင်း နှင့် စမ်းသပ်ခြင်း အတွက် သာ ဖြစ်ပါသည်။ အကြောင်းအရာများ ကို အခြေခံ ဖြစ်စေ၊ သို့မဟုတ် စမ်းသပ်ခြင်း ကို အသုံးပြုခြင်း မှ ဆင်းရဲမှုများ မှာ မိမိ အခြေခံ မပါဘဲ။ အခွင့်အရေးရှိ သည့် အချက်အလက် အား မူပိုင်ခံသည်။ အခွင့်အရေးရှိ အချက်အလက် အား မူပိုင်ခံသည်။

သတင်းအချက်အလက် CodeW3C.com အကူအညီ CodeW3C.com အသုံးပြုခြင်း သတင်းအချက်အလက်

အခန်းခံ ပြင်ပတင်ချက်

CSS ဂရိုဏ်း စာရင်း

စီစ်ဆိုင်ရာ အချက်အလက်

ရွေးချယ် သင်တန်း

ပြသထား သည့် အကြောင်း

CSS @media အခြေခံ

အသုံးပြုခြင်း နှင့် ကျမ်းကို

另请参阅：

实例

例子 1

CSS ဘာသာစကား

not, only နှင့် and သတ္တုပတိုင်း အချက်အလက်

စက်တန့်အမျိုးအစား

စက်တန့်အချက်အလက်

ပိုမိုသော အကျိုးသမား

လုပ်ငန်း 2

လုပ်ငန်း 3

နာမည် 4

အမှတ် 5

အမှတ် 6

အမှတ် 7

အမှတ် 8

အမှတ် 9

ဘရပ်လာတာ ထောက်ပံ့

ကိရိယာပေါင်း

CSS ဂရိုဏ်း စာရင်း

စက်စလင်း အမှတ်အသား

စက်စလင်း အခွင့်

စက်စလင်း ပါးသို့

ပံ့ပိုးစား ခုံ