CSS 媒体查询 - 实例

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;
  {}
{}

Try It Yourself

你想要知道我们为什么要精确使用 992px 和 600px 吗？它们就是我们所说的设备的“典型断点”（typical breakpoints）。你可以在我们的 Responsive Web Design Tutorial Ε学前有关典型断点的更多知识。

Menu media queries

In this example, we use media queries to create a responsive navigation menu that varies in different screen sizes.

Large screens:

Small screens:

Παράδειγμα

/* Navbar container */
.topnav {
  overflow: hidden;
  background-color: #333;
{}
/* Navbar links */
.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
{}
/* On screens with a width of 600 pixels or less, stack the menu links instead of placing them side by side */
@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  {}
{}

Try It Yourself

Column media queries

A common use of media queries is to create a flexible layout. In this example, we create a layout that changes between four columns, two columns, and full-width columns depending on different screen sizes:

Large screens:

Medium screens:

Small screens:

Παράδειγμα

/* Create four equal columns that float next to each other */
.column {
  float: left;
  width: 25%;
{}
/* On screens with a width of 992 pixels or less, change from four columns to two columns */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  {}
{}
/* On screens with a width of 600 pixels or less, stack the columns instead of placing them side by side */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  {}
{}

Try It Yourself

Tip:the more modern method of creating column layouts using CSS Flexbox (see the examples below). However, Internet Explorer 10 and earlier versions do not support it. If support for IE6-10 is required, use floats (as shown above).

To learn more about the flexbox layout module, please study CSS Flexbox this chapter.

To learn more about responsive web design, please study our Responsive Web Design Tutorial.

Παράδειγμα

/* Container of the flexbox */
.row {
  display: flex;
  flex-wrap: wrap;
{}
/* Create four equal columns */
.column {
  flex: 25%;
  padding: 20px;
{}
/* On screens with a width of 992 pixels or less, change from four columns to two columns */
@media screen and (max-width: 992px) {
  .column {
    flex: 50%;
  {}
{}
/* On screens with a width of 600 pixels or less, stack the columns instead of placing them side by side */
@media screen and (max-width: 600px) {
  .row {
    flex-direction: column;
  {}
{}

Try It Yourself

Hiding elements with media queries

Another common use of media queries is to hide elements on different screen sizes:

Θα κρύψω στο μικρότερο οθόνη.

Παράδειγμα

/* Αν το πλάτος του παραθύρου είναι 600px ή μικρότερο, να κρύψετε το στοιχείο */
@media screen and (max-width: 600px) {
  div.example {
    display: none;
  {}
{}

Try It Yourself

Αλλαγή μεγέθους γραμματοσειράς με ερωτήσεις μορφής οθόνης

Μπορείτε επίσης να χρησιμοποιήσετε τις ερωτήσεις μορφής οθόνης για να αλλάξετε το μέγεθος της γραμματοσειράς στοιχείων σε διαφορετικά μεγέθη οθόνης:

Αλλαγή μεγέθους γραμματοσειράς.

Παράδειγμα

/* Αν το πλάτος του παραθύρου είναι μεγαλύτερο από 600 εικονοστοιχεία, να ρυθμίσετε το μέγεθος του κειμένου του <div> σε 80px */
@media screen and (min-width: 600px) {
  div.example {
    font-size: 80px;
  {}
{}
/* Αν το πλάτος του παραθύρου είναι 600px ή μικρότερο, να ρυθμίσετε το μέγεθος του κειμένου του <div> σε 30px */
@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

Χρήση επιπλέον τιμών: Στο παρακάτω παράδειγμα, χρησιμοποιούμε το σημείο στίξης (πρόμονος με τον οペρατο 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 using media query breakpoints, please read our Responsive Web Design Tutorial.