CSS Media Query - Mafanikio

CSS Media Query - Mafanikio mengi

Tunaelewa mafanikio mengi zaidi kwa media query.

Media query ni teknolojia inayotumika sana kusaidia kuwapa stili zilizotumika kwa vifaa vitu vingine.

Tunashiriki maelezo mpya kwa mivumbuzi ya kinaudhathu ya mbili kwa rangi ya kinaudhathu ya vifaa vitu vingine:

CSS Mwongozo wa Media Query

Mfano

/* Inaingiza rangi ya kinaudhathu ya body kwa rangi ya mwelekeo */
body {
  background-color: tan;
}
/* Inaingiza rangi ya kinaudhathu kwa ukingo wa 992 mita au chini ya ukingo huo */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}
/* Inaingiza rangi ya mbili kwa ukingo wa 600 mita au chini ya ukingo huo */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}

Tafadhali tafuta kufanya

Unaitwa kuona kwa sababu tunastahili kutumia 992px na 600px kwa kinaudhathu kubadiliko (typical breakpoints) tunaotumaa kinaudhathu ya mashine. Unaweza kuangalia katika Mwongozo wa muundo wa tovuti ya kina Mafanya kusoma zaidi kuhusu kinaudhathu kubadiliko kwa msingi.

菜单的媒体查询

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

大型屏幕：

小型屏幕：

Mfano

/* 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%;
  }
}

Tafadhali tafuta kufanya

列的媒体查询

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

大型屏幕：

中等屏幕：

小型屏幕：

Mfano

/* 创建彼此相邻浮动的四个相等的列 */
.column {
  float: left;
  width: 25%;
}
/* 在 992p x或更小的屏幕上，从四列变为两列 */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}
/* Kwenye ukurabu kwenye ukurabu wa 600 pixel au chini, hifadhi barua mbili kwa kufikia kufikiria kama kuna kina mbili kwenye kina kwenye kina hata kama kina mbili kwenye kina kwenye kina */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Tafadhali tafuta kufanya

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

如需学习有关弹性框布局模块的更多知识，请学习 CSS ya Flexbox 这一章。

如需学习有关响应式 Web 设计的更多知识，请学习我们的 Mwongozo wa muundo wa tovuti ya kina.

Mfano

/* 弹性盒的容器 */
.row {
  display: flex;
  flex-wrap: wrap;
}
/* Kujenga kina kwa nne kwa ukubwa wa huzuni kwa ukubwa wa huzuni */
.column {
  flex: 25%;
  padding: 20px;
}
/* Kwenye ukurabu wa 992px au chini, kutuma kwa siku wawili kutoka kwa kina kwa nne */
@media screen and (max-width: 992px) {
  .column {
    flex: 50%;
  }
}
/* Kwenye ukurabu kwenye ukurabu wa 600 pixel au chini, hifadhi barua mbili kwa kufikia kufikiria kama kuna kina mbili kwenye kina kwenye kina hata kama kina mbili kwenye kina kwenye kina */
@media screen and (max-width: 600px) {
  .row {
    flex-direction: column;
  }
}

Tafadhali tafuta kufanya

Kufikia ukiripoti wa media query

Makini ya kusoma kwa media query inayotumiwa kwa kufikia ukiripoti wa kina kwenye ukurabu zaidi

在小屏幕上我会隐藏。

Mfano

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

Tafadhali tafuta kufanya

用媒体查询改变字体

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

可变的字体大小。

Mfano

/* 如果屏幕尺寸超过 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;
  }
}

Tafadhali tafuta kufanya

弹性图片库

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

Mfano

Tafadhali tafuta kufanya

弹性网站

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

Mfano

Tafadhali tafuta kufanya

方向：人像 / 风景

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

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

Mfano

如果方向处于横向模式，则使用浅蓝背景色：

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

Tafadhali tafuta kufanya

最小宽度到最大宽度

您还可以使用 max-width 和 min-width 属性设置最小宽度和最大宽度。

Mfano, kama ukurabu wa kifungu cha kikapteni kina 600 pixel hadi 900 pixel, badilisha muonekano wa kitumiaji <div>:

Mfano

@media screen and (max-width: 900px) and (min-width: 600px) {
  div.example {
    mabaki: kifupi: kifupi:
    mabaki: kifupi: kifupi:
    mabaki: kifupi: kifupi:
    mabaki: kifupi: kifupi:
  }
}

Tafadhali tafuta kufanya

Tumia taarifa zaidi: Kwenye mifano hii, tumetumia koma (kama algoriti OR) kongeza media query zaidi kwenye media query zilizopokea hivi karibuni:

Mfano

/* Kama ukijui ukurabu wa 600 pixel hadi 900 pixel au zaidi ya 1100 pixel - badilisha muonekano wa <div> */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    mabaki: kifupi: kifupi:
    mabaki: kifupi: kifupi:
    mabaki: kifupi: kifupi:
    mabaki: kifupi: kifupi:
  }
}

Tafadhali tafuta kufanya

Mashirika ya @media ya CSS

Kuelewa kwa kina kwa kipya kuhusu media types na mafano ya kina na tafadhali tazama Mawebu ya @media katika mashirika ya CSS.

Maelezo:Kwa kuweza kusoma zaidi kuhusu muundo wa tovuti ya kina (kama ni kuhusu vifaa na msingi ya kina) na kutumia media query ya kichukio, tafadhali soma Mwongozo wa muundo wa tovuti ya kina.