CSS မီဒီယာအသုံးပြုမှု - အများ

CSS မီဒီယာအသုံးပြုမှု - အများပြားအပြား

မီဒီယာအသုံးပြုမှု အများအပြား ကို ကြည့်ရှုပါ။

မီဒီယာအသုံးပြုမှု တစ်ခု ဖြစ်သည်။ အခြား အက်ယ်ပစ်ပုံ အချင်းများ အတွက် ချွတ်သစ် အအုံးအစုအဖြစ် အသုံးပြုပါ။

အကူအညီအများအပြား ပြသထားသော အကျယ်အဝန်းအား အပြင်အလ်အပြား ပြသပါ။ ကျွန်ုပ်တို့သည် အမျိုးမျိုးသော အက်ယ်ပစ်ပုံ အချင်းများ အတွက် နောက်ခံအမျိုးအစား အရောင်ကို ပြင်ဆင်ပါမည်။

စီစ်တိုက် စာအုပ်ချုပ်

ဌာန

/* body အချင်းများ၏ နောက်ခံအမျိုးအစား အရောင် အဖြူအပြင့်အသင်းများကို အသုံးပြုပါ */
body {
  background-color: tan;
}
/* 992 ပုံအချင်း သို့မဟုတ် သေးမွန်သော အချင်းများတွင် နောက်ခံအမျိုးအစား အရောင် အမည်ပြုထားသော အရောင်ကို အသုံးပြုပါ */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}
/* 600 ပုံအချင်း သို့မဟုတ် သေးမွန်သော အချင်းများတွင် နောက်ခံအမျိုးအစား အရောင် အဖြူအပြင့်အသင်းများကို အသုံးပြုပါ */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}

ကျွန်ုပ်ကိုယ်ဖြင့် ကြိုးစားလမ်း

ကျွန်ုပ်တို့သည် 992px နှင့် 600px ကို အသုံးပြုသော အကြောင်းကို သင့်မတူချင်ပါဘူး၊ သူတို့သည် ကိုရိုက်တိုက်ပုံအား အမည်ပြုထားသော အက်ယ်ပစ်ပုံ ဖြစ်သည်။ ကျွန်ုပ်တို့၏ စက်ပုံ Web အကျွန်းကြောင်း မူးလျှပ်စစ်ပညာရပ်များအကြောင်း အရေးပါသော ဖြတ်တောက်များကို ပို၍ သိရှိသင့်မည်ဖြစ်သည်။

菜单的媒体查询

在本例中，我们使用媒体查询来创建响应式导航菜单，该菜单在不同的屏幕尺寸上会有所不同。

大型屏幕：

小型屏幕：

ဌာန

/* navbar 容器 */
.topnav {
  overflow: hidden;
  background-color: #333;
}
/* Navbar 链接 */
.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* 在宽度为 600 像素或更小的屏幕上，使菜单链接彼此堆叠，而不是并排 */
@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

ကျွန်ုပ်ကိုယ်ဖြင့် ကြိုးစားလမ်း

列的媒体查询

媒体查询的常见用法是创建弹性布局。在本例中，我们创建了一个布局，该布局在四列、两列和全宽列之间变化，具体取决于不同的屏幕尺寸：

大型屏幕：

中等屏幕：

小型屏幕：

ဌာန

/* 创建彼此相邻浮动的四个相等的列 */
.column {
  float: left;
  width: 25%;
}
/* 在 992p x或更小的屏幕上，从四列变为两列 */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}
/* 在宽度小于或等于 600 像素的屏幕上，使各列堆叠，而不是并排 */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

ကျွန်ုပ်ကိုယ်ဖြင့် ကြိုးစားလမ်း

အကြိမ်更现代的创建列布局方法是使用 CSS Flexbox（请参见下面的例子）。但是，Internet Explorer 10 以及更早版本不支持它。如果需要 IE6-10 的支持，请使用浮动（如上所示）。

如需学习有关弹性框布局模块的更多知识，请学习 စက်ပုံ အချက် 这一章。

如需学习有关响应式 Web 设计的更多知识，请学习我们的 စက်ပုံ Web အကျွန်းကြောင်း.

ဌာန

/* 弹性盒的容器 */
.row {
  display: flex;
  flex-wrap: wrap;
}
/* 创建四个相等的列 */
.column {
  flex: 25%;
  padding: 20px;
}
/* 在 992px 或更小的屏幕上，从四列变为两列 */
@media screen and (max-width: 992px) {
  .column {
    flex: 50%;
  }
}
/* 在宽度小于或等于 600 像素的屏幕上，使各列堆叠，而不是并排 */
@media screen and (max-width: 600px) {
  .row {
    flex-direction: column;
  }
}

ကျွန်ုပ်ကိုယ်ဖြင့် ကြိုးစားလမ်း

用媒体查询隐藏元素

媒体查询的另一种常见用法是在不同屏幕尺寸上隐藏元素：

在小屏幕上我会隐藏。

ဌာန

/* 如果屏幕尺寸为600像素或更小，请隐藏该元素 */
@media screen and (max-width: 600px) {
  div.example {}
    display: none;
  }
}

ကျွန်ုပ်ကိုယ်ဖြင့် ကြိုးစားလမ်း

用媒体查询改变字体

您还可以使用媒体查询来更改不同屏幕尺寸上的元素的字体大小：

可变的字体大小。

ဌာန

/* 如果屏幕尺寸超过 600 像素，把 
 的字体大小设置为 80 像素 */
@media screen and (min-width: 600px) {
  div.example {}
    font-size: 80px;
  }
}
/* 如果屏幕大小为 600px 或更小，把 
 的字体大小设置为 30px */
@media screen and (max-width: 600px) {
  div.example {}
    font-size: 30px;
  }
}

ကျွန်ုပ်ကိုယ်ဖြင့် ကြိုးစားလမ်း

弹性图片库

在此例中，我们将媒体查询与 flexbox 一起使用来创建响应式图片库：

ဌာန

ကျွန်ုပ်ကိုယ်ဖြင့် ကြိုးစားလမ်း

弹性网站

在本例中，我们将媒体查询与 flexbox 一起使用，以创建响应式网站，其中包含弹性导航栏和弹性内容。

ဌာန

ကျွန်ုပ်ကိုယ်ဖြင့် ကြိုးစားလမ်း

方向：人像 / 风景

媒体查询还可以用于根据浏览器的方向更改页面的布局。

您可以设置一组 CSS 属性，这些属性仅在浏览器窗口的宽度大于其高度时才适用，即所谓的横屏：

ဌာန

အခြေအနေ သတင်းထုတ်ပြန်တိုက် အရာဝတ္တု သည် ခြောက်ဆံတိုင် စက်အုတ် ပုံစံ ဖြစ်ပါက ဟင်န်ပန်း အပြည့်အဝါ အခြေအနေ အသုံးပြုပါ

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

ကျွန်ုပ်ကိုယ်ဖြင့် ကြိုးစားလမ်း

အရွယ်အစား အမှတ်အသား အကြား

သင် အမှတ်အသားသုံး max-width နှင့် min-width အခြား ရှိသေးသည့် သတင်းထုတ်ပြန်တိုက် ကို အရွယ်အစား အမှတ်အသား အကြား ကို အသုံးပြုပါ

ဥပမာ၊ ဘာသာစကားလက်ဖြင့် ဘာသာစကား ဝတ်ဆင်ထား သတင်းထုတ်ပြန်တိုက် အကြား 600 ပမာဏ မှ 900 ပမာဏ အကြား ဖြစ်ပါက <div> အရွယ်အစား ကို ပြောင်းလဲပေးပါ

ဌာန

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

ကျွန်ုပ်ကိုယ်ဖြင့် ကြိုးစားလမ်း

အသုံးပြုသော အရွယ်အစား: အောက်ပါ ဌာနမှာ，အသုံးပြုသော သတင်းထုတ်ပြန်တိုက် ကို သတင်းထုတ်ပြန်တိုက် ထဲသို့ အသုံးပြုသော သတင်းထုတ်ပြန်တိုက် ကို အစိုးရပါး ကုက္ခဏီ (အကြောင်းသတင်း OR လှမ်းလှမ်းရှိသော) ဖြင့် အသုံးပြုပါ

ဌာန

/* ဝတ်ဆင်ထား လက်ရှိ သတင်းထုတ်ပြန်တိုက် ကို 600 ပမာဏ မှ 900 ပမာဏ အကြား သို့မဟုတ် 1100 ပမာဏ ထက်သာ ဖြစ်ပါက - <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 ကြောင်း

အချက် စက်ပုံ @media ကြောင်း.

အကြိမ်စက်ပုံ Web အကျွန်းကြောင်း အချက်အလက် အသိအမှတ်ရန် နှင့် ပြောင်းလဲသော ကိရိယာများ အချက်အလက် အသိအမှတ်ရန် ကျမ်းကျသော စာကြည့် စက်ပုံ Web အကျွန်းကြောင်း.