စီစဥ်လိုက်ဖျက် သုံးခုပါ ဝတ္ထုကြီး ပဒေသ မီဒီယာ စစ်ဆေးမှတ်သား

什么是媒体查询？

媒体查询是 CSS3 中引入的一种 CSS 技术。

仅在满足特定条件时，它才会使用 @media 规则来引用 CSS 属性块。

အမှတ်ပြု

如果浏览器窗口是 600px 或更小，则背景颜色为浅蓝色：

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

亲自试一试

添加断点

在本教程中稍早前，我们制作了一张包含行和列的网页，但是这张响应式网页在小屏幕上看起来效果并不好。

媒体查询可以帮助您。我们可以添加一个断点，其中设计的某些部分在断点的每一侧会表现得有所不同。


အခြေခံ ကွန်ပျူတာ

လက်လီ

使用媒体查询在 768px 处添加断点：

အမှတ်ပြု

当屏幕（浏览器窗口）小于 768px 时，每列的宽度应为 100％：

/* 针对桌面设备： */
.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) {
  /* ဖြတ်သားကွန်ပျူတာအတွက် */
  [class*="col-"] {
    width: 100%;
  }
}

亲自试一试

始终移动优先设计

移动优先（Mobile First）指的是在对台式机或任何其他设备进行设计之前，优先针对移动设备进行设计（这将使页面在较小的设备上显示得更快）。

ထို့ကြောင့် ကျွန်တော်တို့ အဆိုပါ စကာတင် တွင် ပိုမို ကောင်းမွန်စွာ လုပ်ဆောင်ခြင်း အတွက် ပြင်ဆင်ချက် များ ကို ပြုလုပ်ပါမည်。

အကွက်အချက်အလက် အရွယ် 768px ထက် သေးသည့်အခါ ကျွန်တော်တို့ ဒီ ပုံစံ ကို ပြောင်းလဲခြင်း သို့မဟုတ် အကွက်အချက်အလက် ကို ပြောင်းလဲခြင်း မပြုဘဲ ပြောင်းလဲပေးခဲ့သည် 'လက်လီ အဖြစ် ပြောင်းလဲပေးခြင်း' အကြောင်း ပြောကြားပါသည်:

အမှတ်ပြု

/* ဖြတ်သားကွန်ပျူတာအတွက် */
[class*="col-"] {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  /* အကွန်ပျူတာအတွက် */
  .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%;}
}

亲自试一试

အပိတ်အဖြတ် တခု

အပိတ်အဖြတ် များစွာ ထပ်ထည့်နိုင်ပါသည်。

ပုံပေါင်း နှင့် လက်လီ အကြား အပိတ်အဖြတ် တစ်ခု ထည့်သွင်းပါမည်。


အခြေခံ ကွန်ပျူတာ

ပုံပေါင်း

လက်လီ

ထို့အတွက် ကျွန်တော်တို့ နည်းပါးစွာ စားသုံးနိုင်သော မီဒီယာစစ်ဆေးစာရင်း (အကွက် 600 ပုံစံ) တစ်ခု ထပ်ထည့်ပေးခဲ့ပြီး 600 ပုံစံ (သို့မဟုတ် 768 ပုံစံ) ထက် သေးသည့် အကွက်အချက်အလက် အချို့ ထပ်ထည့်ခဲ့ပါသည်:

အမှတ်ပြု

ကျွန်ုပ်အား အကြောင်းအရာ နှစ်စုံး အတူတူ ဖြစ်သည်၊ သာ အမည် (col- နှင့် col-s-) ကို ကွဲပြားသည်:

/* ဖြတ်သားကွန်ပျူတာအတွက် */
[class*="col-"] {
  width: 100%;
}
@media only screen and (min-width: 600px) {
  /* ပုံစံကွန်ပျူတာအတွက် */
  .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) {
  /* အကွန်ပျူတာအတွက် */
  .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%;}
}

အတိုင်းတိုင်း အတူတူသော အကွက်အတွက် အလွန်အမြတ် ကြည်းပူးလဲသည် သော်လည်း အမှတ်အသင်းကို ရေးသားရန် ကျေးဇူးပေးနိုင်ပါသည်:

HTML အမှတ်

အုပ်ချုပ်ကွန်ပျူတာအတွက်:

ပထမနှင့် တတိယပိုင်းသည် ၃ လုံးကို အသုံးပြုသည်၊ လယ်ပိုင်းသည် ၆ လုံးကို အသုံးပြုလိမ့်မည်:

ပုံစံကွန်ပျူတာအတွက်:

ပထမပိုင်းသည် ၃ လုံးကို အသုံးပြုသည်၊ ဒုတိယပိုင်းသည် ၉ လုံးကို အသုံးပြုသည်၊ တတိယပိုင်းသည် ပထမနှင့် ဒုတိယပိုင်းအောက်တွင် ပြုပြင်လိမ့်မည် နှင့် ၁၂ လုံးကို အသုံးပြုလိမ့်မည်:

<div class="row">
  
...

  
...

  
...

亲自试一试

典型的设备断点

အရောင်းချီခြင်း နှင့် အခြေအနေ အရောင်းချီခြင်း အများဆုံး ဖြစ်သည်၊ အနက် အခြေအနေ များစွာ အတွက် ရေးရှိသော အခြေအနေကို ချဲ့ကျဲခြင်း အတွက် အကျယ်အဝန်း အရောင်းချီခြင်း အခြေအနေ အများဆုံး အတွက် ရှိသည်။ အကျယ်အဝန်း နှင့် အရောင်းချီခြင်း အခြေအနေ အများဆုံး အတွက် ရှိသည်။

အမှတ်ပြု

/* အကြီးအကျယ် အသုံးပြုခြင်း (အခြေအနေ အရုပ်ဖြင့် ဖြတ်သန်းသော အခြေအနေ 600 ပမာဏအောက်) */
@media only screen and (max-width: 600px) {...} 
/* အကြီးအကျယ် အသုံးပြုခြင်း (အခြေအနေ အရုပ်ဖြင့် ဖြတ်သန်းသော အခြေအနေ 600 ပမာဏအထိ) */
@media only screen and (min-width: 600px) {...} 
/* အကြီးအကျယ် အသုံးပြုခြင်း (အခြေအနေ အရုပ်ဖြင့် ဖြတ်သန်းသော အခြေအနေ 768 ပမာဏအထိ) */
@media only screen and (min-width: 768px) {...} 
/* အကြီးအကျယ် အသုံးပြုခြင်း (လိပ်ချိန်ချိုင်း နှင့် ပလပ်တာ အခြေအနေ 992px အထိ) */
@media only screen and (min-width: 992px) {...} 
/* အကြီးအကျယ် အသုံးပြုခြင်း (အကြီးအကျယ် လိပ်ချိန်ချိုင်း နှင့် ပလပ်တာ အခြေအနေ 1200px အထိ) */
@media only screen and (min-width: 1200px) {...}

亲自试一试

အခြေအနေ: လူရုပ် / မြေမြစ်

မူကွဲစဉ်ကို အသုံးပြု၍ ဝတ္ထုပိုင်း အစိတ်အပိုင်းကို ပြောင်းလဲသည့် အခြား အသုံးပြုခြင်း:

မူကွဲစဉ်ကို အသုံးပြု၍ ဝတ္ထုပိုင်း အစိတ်အပိုင်းကို ပြောင်းလဲသည့် အခြား အသုံးပြုခြင်း:

အမှတ်ပြု

အခြေအနေ အရုပ်ဖြင့် ဖြတ်သန်းသော ကွဲပြားမှုကို ကိုယ်စားပြုလျှင် ဝတ္ထုပိုင်း အကြောင်းအရာ အပြင်ဘက် အရောင် အများဆုံး အပြင်ဘက် အရောင် အပါအဝင် ဖြစ်သည်:

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

亲自试一试

မူကွဲစဉ်ကို အသုံးပြု၍ အကွက်ကို ဖုံးအုပ်

မူကွဲစဉ်ကို အသုံးပြု၍ မတွေ့ဆုံးသော ပုံစံအခြေအနေတွင် အကွက်ကို ဖုံးအုပ်သည့် အခြား အသုံးပြုခြင်း:

အမှတ်ပြု

/* ပေါ်ဆိုင်းအခြေအနေ 600 ပမာဏအထိ သို့မဟုတ် အများဆုံး ကို အကွက်ကို ဖုံးအုပ်ပါ */
@media only screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

亲自试一试

မူကွဲစဉ်ကို အသုံးပြု၍ အကွက်အရွယ်ပြောင်းလဲ

သို့မဟုတ် မူကွဲစဉ်ကို အသုံးပြု၍ မတွေ့ဆုံးသော ပုံစံအခြေအနေတွင် အကွက်အရွယ်ကို ပြောင်းလဲနိုင်ပါသည်:

အမှတ်ပြု

/* ပေါ်ဆိုင်းအခြေအနေ 601px သို့မဟုတ် အများဆုံး ကို <div> ၏ font-size ကို 80px ကို အစားထိုးပါ */
@media only screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}
/* 如果屏幕尺寸为 600px 或更小，请将 
 的 font-size 设置为 30px */
@media only screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

亲自试一试

CSS @media 参考手册

有关所有媒体类型和特性/表达式的完整概述，请在 CSS 参考手册中参阅 @media 规则。