Η ιδιότητα <style> media

HTML <style> κείμενο

Definition and usage

media Attribute used to specify the media/device for which the CSS style is targeted (optimized).

This attribute is used to specify the style applicable to a specific device (such as iPhone), voice, or print media.

Tip:This attribute can accept multiple values.

Instance

Example 1

Specify the styles used for printing:

<style media="print">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>

Try it yourself

Example 2

The two groups of styles are distinguished by the width feature of the media attribute:

<style media="screen AND (max-width:500px)" type="text/css">
a {
  background-color: grey;
  color: white;
  padding: 15px;
}
</style>
<style media="screen AND (min-width:500px)" type="text/css">
a {
  color: red;
  font-weight: 400;
}
</style>

Try it yourself

Note:The first group of styles is used when the browser window width is less than 500 pixels, and the second group of styles is used when the window width is greater than 500 pixels.

Syntax

<style media="value">

Possible operators

Operators περιγραφή
and Specified AND operator.
not Specified NOT operator.
, Specified OR operator.

The conditions for using styles can be designed very carefully. The first thing to clarify is the type of device targeted. The following table summarizes all the values that meet the specified requirements:

Device

Device περιγραφή
all Default. Suitable for all devices.
aural Speech synthesizer.
braille Braille feedback devices.
handheld Handheld devices (small screen, limited bandwidth).
projection Projector.
print Print preview mode/print page.
screen Computer screen.
tty Teletype machines and similar media using a fixed spacing character grid.
tv Television-type devices (low resolution, limited scrolling ability).

The browser is responsible for interpreting device classification. Some device types (such as screen and print) have a relatively consistent interpretation across various browsers, but the interpretation of others (such as handheld) may be more arbitrary. Therefore, it is very necessary to verify that the interpretation of the specific device by the targeted browser is consistent with your own.

χαρακτηριστικά

χαρακτηριστικά περιγραφή
width

θέτει το πλάτος του στόχου της οθόνης.

μπορεί να χρησιμοποιηθούν τα πρόθεσμα "min-" και "max-".

π.χ. media="screen and (min-width:500px)"
height

θέτει το ύψος του στόχου της οθόνης.

μπορεί να χρησιμοποιηθούν τα πρόθεσμα "min-" και "max-".

π.χ. media="screen and (max-height:700px)"
device-width

θέτει το πλάτος του στόχου της οθόνης/χαρτοτύπου.

μπορεί να χρησιμοποιηθούν τα πρόθεσμα "min-" και "max-".

π.χ. media="screen and (device-width:500px)"
device-height

θέτει το ύψος του στόχου της οθόνης/χαρτοτύπου.

μπορεί να χρησιμοποιηθούν τα πρόθεσμα "min-" και "max-".

π.χ. media="screen and (device-height:500px)"
orientation

θέτει τη κατεύθυνση του στόχου της οθόνης/χαρτοτύπου.

υποστηριζόμενες τιμές: portrait ή landscape.

Αυτή η χαρακτηριστική δεν έχει όρια.

π.χ. media="all and (orientation: landscape)"
aspect-ratio

θέτει το ράtio πλάτους/υψους της στόχου της οθόνης.

μπορεί να χρησιμοποιηθούν τα πρόθεσμα "min-" και "max-".

π.χ. media="screen and (aspect-ratio:16/9)"
device-aspect-ratio

θέτει το ράtio πλάτους/υψους του στόχου της οθόνης/χαρτοτύπου.

μπορεί να χρησιμοποιηθούν τα πρόθεσμα "min-" και "max-".

π.χ. media="screen and (aspect-ratio:16/9)"
color

θέτει τον αριθμό των bit ανά χρώμα του στόχου της οθόνης.

μπορεί να χρησιμοποιηθούν τα πρόθεσμα "min-" και "max-".

π.χ. media="screen and (color:3)"
color-index

θέτει τον αριθμό των χρωμάτων που μπορεί να χειριστεί ο στόχος της οθόνης.

μπορεί να χρησιμοποιηθούν τα πρόθεσμα "min-" και "max-".

π.χ. media="screen and (min-color-index:256)"
monochrome

θέτει τον αριθμό των bit ανά pixel στο μονοχρωματικό frame buffer.

μπορεί να χρησιμοποιηθούν τα πρόθεσμα "min-" και "max-".

π.χ. media="screen and (monochrome:2)"
resolution

θέτει τη πυκνότητα των pixel (dpi ή dpcm) του στόχου της οθόνης/χαρτοτύπου.

μπορεί να χρησιμοποιηθούν τα πρόθεσμα "min-" και "max-".

π.χ. media="print and (resolution:300dpi)"
scan

θέτει τη μορφή σάρωσης της τηλεόρασης.

υποστηριζόμενες τιμές: progressive και interlace。

Αυτή η χαρακτηριστική δεν έχει όρια.

π.χ. media="tv and (scan:interlace)"
grid

Προκαθορίζει αν η έξοδος είναι grid ή bitmap.

Οι συσκευές grid χρησιμοποιούν σταθερό δίκτυο για την εμφάνιση περιεχομένου, όπως χαρακτήρες终端 και μονογράφητα寻呼机.

Οι υποστηριζόμενες τιμές είναι 0 και 1 (1 για τα συσκευές grid).

Αυτή η χαρακτηριστική δεν έχει όρια.

Παράδειγμα: media="handheld and (grid:1)"

Οι χαρακτηριστικές όπως το width συνήθως συνδυάζονται με τα όρια min και max. Χωρίς αυτά τα όρια, η χρήση των στυλ μπορεί να εξαρτάται από την εξαιρετικά ακριβή διάσταση του παραθύρου, αλλά η προσθήκη των ορίων κάνει τις συνθήκες πιο ευέλικτες.

Το παρακάτω πίνακας αναφέρει και περιγράφει τις διαθέσιμες χαρακτηριστικές. Αν δεν αναφέρεται διαφορετικά, αυτές οι χαρακτηριστικές μπορούν να χρησιμοποιηθούν με τα min- και max- για να δημιουργήσουν ορίου και όχι ακριβείς τιμές.

Όπως και με τους προκαθορισμένους εξοπλισμούς, αυτές οι χαρακτηριστικές είναι εξηγούμενες από τους περιηγητές. Το πώς οι περιηγητές αναγνωρίζουν τις χαρακτηριστικές και τις θεωρούν ως υπάρχουσες και διαθέσιμες είναι πολύπλοκο. Αν θέλετε να εφαρμόσετε στυλ με αυτές τις χαρακτηριστικές, βεβαιωθείτε ότι έχετε κάνει ολοκληρωτικές δοκιμές και έχετε εναλλακτικά στυλ έτοιμα για χρήση όταν οι χαρακτηριστικές δεν είναι διαθέσιμες.

Υποστήριξη Περιηγητή

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη

HTML <style> κείμενο