CSS (15) CSS Media Queries Media Queries

1. Media inquiries

Inherited all the ideas of CSS2 multimedia types: instead of finding the type of the device, CSS3 adaptive display according to the settings.

Media queries can be used to detect many things, such as:

  • The width and height of the viewport
  • device width and height
  • Orientation (smartphone landscape, portrait).
  • Resolution

At present, many devices such as Apple mobile phones, Android mobile phones, and tablets will use multimedia queries.

Second, the media type: mediatype

Media Types allow you to define the medium in which the document should be submitted. Documents can be displayed on a monitor, paper medium, or aural browser, among others.

Some CSS properties are only designed for certain media. For example the voice-family attribute is designed for auditory user agents. Some other properties are available for different media types. For example, font-
The size attribute is available for screen and print media, but has different values. Documents on screen and paper are different and usually require a larger font, sans-serif
Fonts are easier to read on screen, while serif fonts are easier to read on paper.

  • all : for all multimedia type devices
  • print : for the printer
  • screen : For computer screens, tablets, smartphones, etc. (default)
  • speech : for screen readers

3. Media query syntax

A media query consists of multiple media and can contain one or more expressions that return true or false depending on whether the condition is true.

    @media not|only mediatype and (expressions) {
        CSS code...;

If the specified multimedia type matches the device type, the query result returns true, and the document will display the specified style effect on the matching device.

All styles will display on all devices unless you use the not or only operator.

  • not: not is used to exclude certain devices, such as @media not print (non-printing devices).

  • only: Used to define a particular media type.
    For mobile devices that support Media Queries, if the only keyword exists, the mobile device's Web browser will ignore the only keyword and apply the style file directly based on the following expression.
    For Web browsers that do not support Media Queries but can read the Media Type type, this style file will be ignored when the only keyword is encountered.

  • all: All devices, this should be seen frequently.

4. Examples of media queries

Use multimedia query to replace the original style with the corresponding style on the specified device.

1. The @media rule allows setting different styles for different media in the same style sheet.

The example below tells us to display a 14px Verdana font style on the browser screen. But if the page prints, it will be Times of 10 pixels
font. Note that font-weight is set to bold on screen and on paper:

    @media screen
        p.test {font-family:verdana,sans-serif;font-size:14px;}
    @media print
        p.test {font-family:times,serif;font-size:10px;}
    @media screen,print
        p.test {font-weight:bold;}

try it "

You can also use different style files on different media:

external style

    <link rel="stylesheet" media="print" href="print.css">

Internal style:

    <style type="text/css">
     h1 {color:#FF0000;}
     p {color:#0000FF;}
     body {background-color:#FFEFD6;}
    <style type="text/css" media="print">
     h1 {color:#000000;}
     p {color:#000000;}
     body {background-color:#FFFFFF;}

2. The following example floats the menu to the left side of the page when the size of the visible window on the screen is greater than 480 pixels:

    @media screen and (min-width: 480px) {
        #leftsidebar {width: 200px; float: left;}
        #main {margin-left:216px;}

try it "

3. CSS multimedia query, adapt to various device sizes

    .example {
        padding: 20px;
        color: white;
    /* Extra small devices (phones, 600px and down) */
    @media only screen and (max-width: 600px) {
        .example {background: red;}
    /* Small devices (portrait tablets and large phones, 600px and up) */
    @media only screen and (min-width: 600px) {
        .example {background: green;}
    /* Medium devices (landscape tablets, 768px and up) */
    @media only screen and (min-width: 768px) {
        .example {background: blue;}
    /* Large devices (laptops/desktops, 992px and up) */
    @media only screen and (min-width: 992px) {
        .example {background: orange;}
    /* Extra large devices (large laptops and desktops, 1200px and up) */
    @media only screen and (min-width: 1200px) {
        .example {background: pink;}

4. Use a mailing list link on the sidebar of a web page

    /* 520 to 699px width - add mailbox icon
     Greater than 1151px width - add icon
     Instead of writing additional query blocks, we can add additional media queries (similar to the OR operator) using comma-separated media after the existing query media: */ 
    @media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
        #nav li a {
            padding-left: 30px;
            background: url(email-icon.png) left center no-repeat;
    /* 700 to 1000px - add text prefix information */ 
    @media screen and (max-width: 1000px) and (min-width: 700px) {
        #nav li a:before {
            content: "Email: ";
            font-style: italic;
            color: #666666;
    /*  Greater than 1001px width - add email address */ 
    @media screen and (min-width: 1001px) {
        #nav li a:after {
            content: " (" attr(data-email) ")";
            font-size: 12px;
            font-style: italic;
            color: #666666;

try it "

Posted by roxiroxi on Fri, 13 May 2022 12:08:26 +0300