CSS 媒体查询 - 实例

CSS 媒体查询 - 更多实例

让我们看看使用媒体查询的更多例子。

媒体查询是一种流行的技术，用于将定制的样式表传递给不同的设备。

下面演示一个简单的例子，让我们来更改不同设备的背景色：

CSS ɗauɗaɗuwa

النموذج

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

Try It Yourself

O fẹ́ mọ ìdí tí a fi 992px àti 600px lò lọ́nà pàtàkì? Wọ́n jẹ́ ti a pè ní 'pàtàkì silo ìpèsè àwọn ẹ̀rọ' (typical breakpoints). O le rí àwọn Responsive Web Design Tutorial Akan koyi ọwọ ni ti a ti yàwọpọ̀ lọwọ ti a kọwọ silo ti a pàtàkì.

菜单的媒体查询

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

大型屏幕：

小型屏幕：

النموذج

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

Try It Yourself

列的媒体查询

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

大型屏幕：

中等屏幕：

小型屏幕：

النموذج

/* 创建彼此相邻浮动的四个相等的列 */
.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%;
  }
}

Try It Yourself

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

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

如需学习有关响应式 Web 设计的更多知识，请学习我们的 Responsive Web Design Tutorial.

النموذج

/* 弹性盒的容器 */
.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;
  }
}

Try It Yourself

用媒体查询隐藏元素

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

سأخفيه على الشاشات الصغيرة.

النموذج

/* إذا كان حجم الشاشة 600 بكسل أو أقل، قم بإخفاء العنصر */
@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

Try It Yourself

تغيير حجم الخط باستخدام استعلام وسائط

يمكنك أيضًا استخدام استعلامات وسائط لتغيير حجم الخط للأعمدة المختلفة على الشاشات المختلفة:

حجم الخط المتغير

النموذج

/* إذا كان حجم الشاشة أكبر من 600 بكسل، قم بضبط حجم الخط إلى 80 بكسل */
@media screen and (min-width: 600px) {
  div.example {
    font-size: 80px;
  }
}
/* إذا كان حجم الشاشة 600 بكسل أو أقل، قم بضبط حجم الخط إلى 30 بكسل */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

Try It Yourself

مكتبة الصور المرنة

في هذا المثال، سنستخدم استعلامات وسائط مع flexbox لإنشاء مكتبة صور مرنة:

النموذج

Try It Yourself

الموقع المرن

في هذا المثال، سنستخدم استعلامات وسائط مع flexbox لإنشاء موقع مستجيب، يحتوي على قائمة مرجعية مرنة ومحتوى مرن.

النموذج

Try It Yourself

اتجاه: صورة شخصية / مناظر طبيعية

يمكن استخدام استعلامات وسائط أيضًا لتغيير تخطيط الصفحة بناءً على الاتجاه

يمكنك تعيين مجموعة من خصائص CSS، وتطبيقها فقط عندما يكون عرض نافذة المتصفح أكبر من ارتفاعها، وهي المعروفة بالشاشة العرضية:

النموذج

إذا كانت الاتجاه في الوضع الرأسي، يتم استخدام لون الخلفية الفاتح:

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

Try It Yourself

من الأحجام الأدنى إلى الأكبر

يمكنك أيضًا استخدام خصائص 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;
  }
}

Try It Yourself

استخدام القيمة الإضافية: في المثال التالي، نستخدمomma (مثل عميل 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;
  }
}

Try It Yourself

CSS @media Reference Manual

For a complete overview of all media types and features/expressions, please see CSS Reference @media Rule.

Tip:For more knowledge about responsive web design (how to target different devices and screens) and the use of media query breakpoints, please read our Responsive Web Design Tutorial.