Muundo wa tovuti inayohusiana na kina - Matokeo ya media

什么是媒体查询？

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

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

Mfano

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

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

亲自试一试

添加断点

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

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


Kikompyuta cha kichwa cha mawingu

Simu ya kifaa

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

Mfano

当屏幕（浏览器窗口）小于 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) {
  /* Kwa simu: */
  [class*="col-"] {
    width: 100%;
  }
}

亲自试一试

始终移动优先设计

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

Hii inamaanisha hatuwezi kumaliza kufanya mafanikio katika CSS.

Kama ukijaribu na upo kichwa cha kikagwa chini ya 768px, tunahitaji kumaliza usafiri wa design hata ingepita kichwa cha kikagwa. Tumekuwa kumaliza design ya 'mobile first' kama hii:

Mfano

/* Kwa simu: */
[class*="col-"] {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  /* Kwa masaa mpya: */
  .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%;}
}

亲自试一试

Matokeo ya kuzungumza mwingine

Wewe unaweza kuongeza ukosefu zaidi wa matokeo ya kuzungumza.

Tunatengeneza matokeo ya kuzungumza kati ya kifaa cha kidato na simu ya kifaa.


Kikompyuta cha kichwa cha mawingu

Kifaa cha kidato

Simu ya kifaa

Kwa hii, tumepataja media query (katika 600 mabaki ya kikagwa), na tukianzisha kikundi kipya cha class kwa kifaa kikubwa zaidi ya 600 mabaki ya kikagwa lakini chini ya 768 mabaki ya kikagwa:

Mfano

请注意，两组类几乎相同，唯一的区别是名称（col- 和 col-s-）：

/* Kwa simu: */
[class*="col-"] {
  width: 100%;
}
@media only screen and (min-width: 600px) {
  /* Kwa taslimu: */
  .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) {
  /* Kwa masaa mpya: */
  .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%;}
}

Inafikia kwa kumekadiri kama kinaonekana kwa sababu ya kufikiria ya kawaida, lakini ininofaana kwa sababu ininopata fursa ya kutumia HTML kwenye kila muhimu kufikia kwa kichwa kikuu kinaelele:

Mifano ya HTML

Kwa taslimu:

Kichwa kikuu na kichwa kikuu kinakosa 3 kati. Kichwa kikuu kinatokana na 6 kati.

Kwa taslimu:

Kichwa kikuu kinatengeneza 3 kati, kichwa kikuu kinatengeneza 9 kati, kichwa kikuu kinatokana na kichwa kikuu kinaelele, kinatokana na 12 kati:

<div class="row">
  <div class="col-3 col-s-3">...</div>
  <div class="col-6 col-s-9">...</div>
  <div class="col-3 col-s-12">...</div>
</div>

亲自试一试

Mbinu ya kina ya kawaida

Mashine na skrimi na ukurabu na uwezo zaidi zimeongezeka, kwa hiyo inavyofikia kwa kubuni mbinu ya kina kwa kila kina. Kwa kusababisha, wewe unaweza kumwambia kumpatikana kwa kumpiga hizi kumpatikana:

Mfano

/* Mashine kicukua (simu, 600px na chini) */
@media only screen and (max-width: 600px) {...} 
/* Mashine kicukua (tablets kwenye kina na simu kubwa, 600 pixels na zaidi) */
@media only screen and (min-width: 600px) {...} 
/* Mashine kiume (tablets kwenye uharibifu, 768 pixels na zaidi) */
@media only screen and (min-width: 768px) {...} 
/* Mashine kubwa (laptop na desktop, 992px na zaidi) */
@media only screen and (min-width: 992px) {...} 
/* Mashine kubwa (laptop na desktop, 1200px na zaidi) */
@media only screen and (min-width: 1200px) {...}

亲自试一试

Uongozi: Mwana / Uharibifu

Media query pia inaweza kutumika kubadilisha ujumbe wa wavuti kwa ukurabu wa kina:

Wewe unaweza kubadilisha kumpatikana kwa kumpiga CSS herufi, herufi hizi inayotumika tu kwa ukurabu wa kina wa kawaida una uwezo wa kumekadiri ukurabu wa kina na kiyuka zaidi ya kiyuka:

Mfano

Ikiwe kwa uongozi una uwanja wa uharibifu (landscape mode), mabara wa wengi wa wavuti haujifichukia kwa rangi ya kijani kifupi:

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

亲自试一试

Utafiti wa media query wa kufichukia elementi

Majukumu ya media query yana uwanja wa kawaida kwa kufichukia elementi kwenye ukurabu wa skrimi zaidi:

Mfano

/* Ikiwe kwa ukurabu wa skrimi una uwezo wa 600 simu au chini, ingarudia kufichukia kina hiki */
@media only screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

亲自试一试

Utafiti wa media query wa herufi

Wewe pia unaweza kutumia media query kuongeza ukurabu wa herufi kwa ukurabu wa skrimi zaidi:

Mfano

/* Ikiwe kwa ukurabu wa skrimi una uwezo wa 601px au zaidi, ingaarudia kufikiria font-size ya <div> kwa 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 规则。