@media can be used to apply part of a style sheet based on the result of one or more media queries . With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.

@media not|only mediatype and (expressions) {
  css-code;
}

You can use an external style sheet based on media query.

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="style.css">

Media Types

• all – all media types
• print – printers
• screen – computer screens, tablets, smart-phones, etc.
• speech – screenreaders that reads page out loud

Media features

• min-width – minimum width of display area where rule is applied.
• min-height – minimum height of display area where rule is applied.
• max-width – maximum width of display area where rule is applied.
• max-height – maximum height of display area where rule is applied.
• orientation – portrait or landscape

Max-width

<div class="row">
    <div class="col-4">
        <h4>Screen with Max width</h4>
        <div>max-width: 600x</div>
    </div>
    <div class="col-8" id="maxWidth">
        max width
    </div>
</div>
<style>
            @media screen and (max-width: 600px) {
                #maxWidth {
                    background-color: lavender;
                }
            }
</style>

Min-width

<div class="row">
    <div class="col-4">
        <h4>Screen with Min width</h4>
        <div>min-width: 601px</div>
    </div>
    <div class="col-8" id="minWidth">
        min width
    </div>
</div> 
<style>
            @media screen and (min-width: 601px) {
                #minWidth {
                    background-color: yellow;
                }
            }
</style>

Min-width and max-width

<div class="row">
    <div class="col-4">
        <h4>Screen with Min to Max width</h4>
        <div>min-width: 600px to min-width: 800px</div>
    </div>
    <div class="col-8" id="mintomaxWidth">
        min to max width
    </div>
</div>
<style>
            @media screen and (max-width: 900px) and (min-width: 600px)   {
                #mintomaxWidth {
                    background-color: lightblue;
                }
            }
</style>

Min-width or max-width

<div class="row">
    <div class="col-4">
        <h4>Media query with or</h4>
    </div>
    <div class="col-8" id="mediaWithOr">
        media query with or
    </div>
</div>
<style>

            /* use , for or */

            @media screen and (max-width: 800px), screen and (min-width: 600px)   {
                #mediaWithOr {
                    background-color: greenyellow;
                }
            }
</style>

Orientation

<div class="row">
    <div class="col-4">
        <h4>Orientation Portrait</h4>
    </div>
    <div class="col-8" id="portrait">
        portrait
    </div>
</div>
<br>
<div class="row">
    <div class="col-4">
        <h4>Orientation Landscape</h4>
    </div>
    <div class="col-8" id="landscape">
        landscape
    </div>
</div>
         <style>
            @media screen and (orientation: landscape) {
                #landscape {
                    background-color: purple;
                }
            }

            @media screen and (orientation: portrait) {
                #portrait {
                    background-color: lightblue;
                }
            }
        </style>

Print

<div class="row">
    <div class="col-4">
        <h4>Print</h4>
    </div>
    <div class="col-8" id="print">
        print
    </div>
</div> 
         <style>
             @media print {
                #print {
                    color: blue;
                    font-size: xx-large;
                    font-weight: bold;
                }
            }
            
        </style>

Source code in Github