CSS 38 💻 monochrome and orientation media features - KandZ

These two media features let you adapt styles for monochrome displays and screen orientation — one for specialized devices, the other for everyday responsive design.

Overview of Features

Feature	Description	Values
`monochrome`	Bits per pixel for monochrome devices	Integer (0, 1, 8)
`orientation`	Portrait or landscape orientation	`portrait`, `landscape`

1. monochrome

The monochrome media feature tests the number of bits per pixel (bpp) on monochrome (non-color) devices.

@media (monochrome) {
    body {
        background-color: #f0f0f0;
        color: #000;
    }
}

Variations

Feature	Description	Example
`monochrome`	Any monochrome device	`@media (monochrome)`
`monochrome: 0`	Non-monochrome device	`@media (monochrome: 0)`
`min-monochrome: 1`	At least 1 bpp	`@media (min-monochrome: 1)`
`max-monochrome: 8`	At most 8 bpp	`@media (max-monochrome: 8)`

Common Values

Bits per Pixel	Description	Device Example
`0`	Not monochrome	Modern color displays
`1`	2 colors (black/white)	Simple e-ink readers
`2`	4 shades	Early e-ink
`4`	16 shades	Grayscale displays
`8`	256 shades	Advanced e-ink, medical displays

Key Points:

monochrome: 0 means the device is not monochrome (has color)
monochrome without a value matches any monochrome device (bpp > 0)
min-monochrome: 1 is equivalent to monochrome (any monochrome device)
Most modern devices match monochrome: 0
Useful for e-ink readers, braille displays, and specialized hardware

2. orientation

The orientation media feature applies styles based on whether the viewport is in portrait or landscape orientation.

@media screen and (orientation: portrait) {
    body {
        background-color: #f0f0f0;
    }
}

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

Values

Value	Description	Condition
`portrait`	Height ≥ Width	Vertical orientation
`landscape`	Width > Height	Horizontal orientation

Visual Representation

Portrait:              Landscape:
┌─────────┐            ┌───────────────────┐
│         │            │                   │
│         │            │                   │
│         │            │                   │
│         │            │                   │
│         │            │                   │
└─────────┘            └───────────────────┘
Height ≥ Width         Width > Height

Key Points:

orientation is about the viewport shape, not the physical device
It changes when the user rotates their device
It changes when the user resizes their browser window
A square viewport is considered portrait (height ≥ width)
Common use: adjusting layouts for mobile landscape vs. portrait

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>monochrome and orientation Media Features</title>
    <style>
        *, *::before, *::after {
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            padding: 20px;
            background: #f8f9fa;
            color: #333;
            max-width: 1200px;
            margin: 0 auto;
            line-height: 1.6;
            transition: background 0.3s, color 0.3s;
        }

        h1 {
            color: #007bff;
            border-bottom: 3px solid #007bff;
            padding-bottom: 10px;
        }

        h2 {
            color: #28a745;
            border-left: 4px solid #28a745;
            padding-left: 15px;
            margin-top: 30px;
        }

        h3 {
            color: #333;
            margin-top: 20px;
        }

        section {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin: 20px 0;
            transition: all 0.3s;
        }

        .code-block {
            background: #1e1e1e;
            color: #d4d4d4;
            padding: 15px;
            border-radius: 8px;
            overflow-x: auto;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            line-height: 1.8;
            margin: 10px 0;
        }

        .reference-table {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0;
        }

        .reference-table th,
        .reference-table td {
            padding: 10px;
            border: 1px solid #ddd;
            text-align: left;
        }

        .reference-table th {
            background: #007bff;
            color: white;
        }

        .reference-table tr:nth-child(even) {
            background: #f8f9fa;
        }

        .note {
            font-size: 0.9rem;
            color: #6c757d;
            margin-top: 5px;
        }

        .highlight {
            background: #ffc107;
            color: #333;
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: bold;
        }

        /* ====== MONOCHROME DEMO ====== */
        .monochrome-demo {
            padding: 20px;
            border-radius: 8px;
            text-align: center;
            font-weight: bold;
            font-size: 1.2rem;
            margin: 15px 0;
            transition: all 0.3s;
            background: #e9ecef;
            border: 2px solid #ddd;
        }

        /* Any monochrome device */
        @media (monochrome) {
            .monochrome-demo {
                background: #000;
                color: #fff;
                border-color: #fff;
            }
            .monochrome-demo::after {
                content: " (monochrome device detected)";
                font-weight: normal;
                font-size: 0.85rem;
            }
        }

        /* Non-monochrome device */
        @media (monochrome: 0) {
            .monochrome-demo {
                background: #e9ecef;
                color: #333;
                border-color: #ddd;
            }
            .monochrome-demo::after {
                content: " (color device — monochrome: 0)";
                font-weight: normal;
                font-size: 0.85rem;
            }
        }

        /* ====== ORIENTATION DEMO ====== */
        .orientation-demo {
            padding: 20px;
            border-radius: 8px;
            text-align: center;
            font-weight: bold;
            font-size: 1.2rem;
            margin: 15px 0;
            transition: all 0.3s;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 150px;
        }

        /* Portrait orientation */
        @media screen and (orientation: portrait) {
            .orientation-demo {
                background: #ff6b6b;
                color: white;
                border: 2px solid #c92a2a;
            }
            .orientation-demo .icon {
                font-size: 3rem;
                display: block;
            }
            .orientation-demo .icon::before {
                content: "📱";
            }
            .orientation-demo .label::after {
                content: " Portrait";
                font-weight: bold;
            }
        }

        /* Landscape orientation */
        @media screen and (orientation: landscape) {
            .orientation-demo {
                background: #28a745;
                color: white;
                border: 2px solid #1e7e34;
            }
            .orientation-demo .icon {
                font-size: 3rem;
                display: block;
            }
            .orientation-demo .icon::before {
                content: "🖥️";
            }
            .orientation-demo .label::after {
                content: " Landscape";
                font-weight: bold;
            }
        }

        /* ====== RESPONSIVE LAYOUT DEMO ====== */
        .layout-demo {
            display: flex;
            gap: 15px;
            margin: 15px 0;
            transition: all 0.3s;
            flex-wrap: wrap;
        }

        .layout-demo .box {
            background: #007bff;
            color: white;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
            font-weight: bold;
            flex: 1;
            min-width: 100px;
            transition: all 0.3s;
        }

        /* Portrait: stack vertically */
        @media screen and (orientation: portrait) {
            .layout-demo {
                flex-direction: column;
            }
            .layout-demo .box {
                background: #ff6b6b;
            }
        }

        /* Landscape: horizontal row */
        @media screen and (orientation: landscape) {
            .layout-demo {
                flex-direction: row;
            }
            .layout-demo .box {
                background: #28a745;
            }
        }

        /* ====== MOBILE LANDSCAPE WARNING ====== */
        .landscape-warning {
            display: none;
            padding: 15px;
            background: #fff3cd;
            border: 2px solid #ffc107;
            border-radius: 8px;
            text-align: center;
            margin: 15px 0;
            font-weight: bold;
            color: #856404;
        }

        @media screen and (orientation: landscape) and (max-height: 500px) {
            .landscape-warning {
                display: block;
            }
        }

        /* ====== DETECTION CARDS ====== */
        .detection-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin: 20px 0;
        }

        .detection-card {
            padding: 15px;
            border-radius: 8px;
            text-align: center;
            border: 2px solid #ddd;
            background: #f8f9fa;
            transition: all 0.3s;
        }

        .detection-card .label {
            font-size: 0.85rem;
            color: #666;
            display: block;
            margin-bottom: 5px;
        }

        .detection-card .value {
            font-size: 1.1rem;
            font-weight: bold;
            color: #007bff;
        }

        /* ====== LIVE INDICATOR ====== */
        .live-indicator {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: #007bff;
            color: white;
            padding: 12px 20px;
            border-radius: 50px;
            font-weight: bold;
            font-size: 0.85rem;
            box-shadow: 0 4px 15px rgba(0,123,255,0.4);
            z-index: 1000;
            transition: all 0.3s;
            display: flex;
            flex-direction: column;
            gap: 3px;
        }

        .live-indicator .detail {
            font-size: 0.75rem;
            opacity: 0.9;
        }

        /* ====== PRACTICAL: RESPONSIVE CARD ====== */
        .profile-card {
            display: flex;
            gap: 20px;
            padding: 20px;
            background: white;
            border: 2px solid #ddd;
            border-radius: 12px;
            margin: 15px 0;
            transition: all 0.3s;
            align-items: center;
        }

        .profile-card .avatar {
            width: 80px;
            height: 80px;
            background: #007bff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 2rem;
            font-weight: bold;
            flex-shrink: 0;
        }

        .profile-card .info {
            flex: 1;
        }

        .profile-card .info h4 {
            margin: 0 0 5px 0;
            color: #007bff;
        }

        .profile-card .info p {
            margin: 0;
            color: #6c757d;
            font-size: 0.9rem;
        }

        /* Portrait: stack vertically */
        @media screen and (orientation: portrait) {
            .profile-card {
                flex-direction: column;
                text-align: center;
            }
        }

        /* Landscape: horizontal row */
        @media screen and (orientation: landscape) {
            .profile-card {
                flex-direction: row;
                text-align: left;
            }
        }

        /* ====== MONOCHROME STYLES ====== */
        @media (monochrome) {
            body {
                background: #fff;
                color: #000;
            }
            section {
                background: #fff;
                border: 1px solid #000;
                box-shadow: none;
            }
            h1, h2, h3 {
                color: #000;
            }
            h1 {
                border-bottom-color: #000;
            }
            h2 {
                border-left-color: #000;
            }
            .code-block {
                background: #f0f0f0;
                color: #000;
                border: 1px solid #ccc;
            }
            .reference-table th {
                background: #000;
                color: #fff;
            }
            .reference-table td {
                border-color: #999;
            }
            .detection-card {
                border-color: #000;
                background: #fff;
            }
            .profile-card {
                border-color: #000;
            }
            .profile-card .avatar {
                background: #000;
            }
            .highlight {
                background: #000;
                color: #fff;
            }
        }
    </style>
</head>
<body>

    <h1>monochrome and orientation Media Features</h1>

    <!-- ====== 1. MONOCHROME DEMO ====== -->
    <section>
        <h2>1. monochrome</h2>
        <p>Tests the <strong>number of bits per pixel</strong> on monochrome devices.</p>

        <div class="monochrome-demo">
            Monochrome Detection
        </div>

        <div class="code-block">
            /* Any monochrome device */
            @media (monochrome) {
                .demo {
                    background: #000;
                    color: #fff;
                }
            }

            /* Non-monochrome device */
            @media (monochrome: 0) {
                .demo {
                    background: #e9ecef;
                    color: #333;
                }
            }

            /* At least 1 bit per pixel */
            @media (min-monochrome: 1) {
                /* Monochrome device with ≥ 1 bpp */
            }

            /* At most 8 bits per pixel */
            @media (max-monochrome: 8) {
                /* Monochrome device with ≤ 8 bpp */
            }
        </div>
    </section>

    <!-- ====== 2. ORIENTATION DEMO ====== -->
    <section>
        <h2>2. orientation</h2>
        <p>Applies styles based on <strong>portrait</strong> or <strong>landscape</strong> orientation. Rotate your device or resize your browser!</p>

        <div class="orientation-demo">
            <span class="icon"></span>
            <span class="label">Current Orientation:</span>
        </div>

        <h3>Responsive Layout</h3>
        <div class="layout-demo">
            <div class="box">📦 Box 1</div>
            <div class="box">📦 Box 2</div>
            <div class="box">📦 Box 3</div>
        </div>

        <div class="landscape-warning">
            ⚠️ You're in mobile landscape mode — content may be cramped. Rotate to portrait for a better experience.
        </div>

        <div class="code-block">
            /* Portrait orientation (height ≥ width) */
            @media screen and (orientation: portrait) {
                .layout-demo {
                    flex-direction: column;
                }
            }

            /* Landscape orientation (width > height) */
            @media screen and (orientation: landscape) {
                .layout-demo {
                    flex-direction: row;
                }
            }

            /* Mobile landscape warning */
            @media screen and (orientation: landscape) and (max-height: 500px) {
                .landscape-warning {
                    display: block;
                }
            }
        </div>
    </section>

    <!-- ====== 3. PRACTICAL EXAMPLE ====== -->
    <section>
        <h2>3. Practical Example: Responsive Profile Card</h2>
        <p>This card adapts its layout based on orientation.</p>

        <div class="profile-card">
            <div class="avatar">👤</div>
            <div class="info">
                <h4>John Doe</h4>
                <p>Full-Stack Developer</p>
                <p>Passionate about creating responsive, accessible web experiences.</p>
            </div>
        </div>

        <div class="code-block">
            /* Portrait: stack vertically */
            @media screen and (orientation: portrait) {
                .profile-card {
                    flex-direction: column;
                    text-align: center;
                }
            }

            /* Landscape: horizontal row */
            @media screen and (orientation: landscape) {
                .profile-card {
                    flex-direction: row;
                    text-align: left;
                }
            }
        </div>
    </section>

    <!-- ====== 4. DETECTION SUMMARY ====== -->
    <section>
        <h2>4. Your Device's Capabilities</h2>
        <p>Below is a live detection of your device's capabilities.</p>

        <div class="detection-grid">
            <div class="detection-card" id="mono-any">
                <span class="label">monochrome</span>
                <span class="value" id="mono-any-value">Detecting...</span>
            </div>
            <div class="detection-card" id="mono-0">
                <span class="label">monochrome: 0</span>
                <span class="value" id="mono-0-value">Detecting...</span>
            </div>
            <div class="detection-card" id="mono-min-1">
                <span class="label">min-monochrome: 1</span>
                <span class="value" id="mono-min-1-value">Detecting...</span>
            </div>
            <div class="detection-card" id="orient-portrait">
                <span class="label">orientation: portrait</span>
                <span class="value" id="orient-portrait-value">Detecting...</span>
            </div>
            <div class="detection-card" id="orient-landscape">
                <span class="label">orientation: landscape</span>
                <span class="value" id="orient-landscape-value">Detecting...</span>
            </div>
        </div>

        <div class="code-block">
            /* Detect monochrome */
            @media (monochrome) { /* Any monochrome device */ }
            @media (monochrome: 0) { /* Non-monochrome device */ }
            @media (min-monochrome: 1) { /* At least 1 bpp */ }

            /* Detect orientation */
            @media (orientation: portrait) { /* Height ≥ Width */ }
            @media (orientation: landscape) { /* Width > Height */ }
        </div>
    </section>

    <!-- ====== 5. REFERENCE TABLES ====== -->
    <section>
        <h2>5. Reference Tables</h2>

        <h3>monochrome Values</h3>
        <table class="reference-table">
            <tr>
                <th>Feature</th>
                <th>Description</th>
                <th>Example</th>
            </tr>
            <tr>
                <td><code>monochrome</code></td>
                <td>Any monochrome device (bpp > 0)</td>
                <td><code>@media (monochrome)</code></td>
            </tr>
            <tr>
                <td><code>monochrome: 0</code></td>
                <td>Non-monochrome device</td>
                <td><code>@media (monochrome: 0)</code></td>
            </tr>
            <tr>
                <td><code>min-monochrome: 1</code></td>
                <td>At least 1 bit per pixel</td>
                <td><code>@media (min-monochrome: 1)</code></td>
            </tr>
            <tr>
                <td><code>max-monochrome: 8</code></td>
                <td>At most 8 bits per pixel</td>
                <td><code>@media (max-monochrome: 8)</code></td>
            </tr>
        </table>

        <h3>Bits per Pixel Values</h3>
        <table class="reference-table">
            <tr>
                <th>Bits per Pixel</th>
                <th>Description</th>
                <th>Device Example</th>
            </tr>
            <tr>
                <td><code>0</code></td>
                <td>Not monochrome</td>
                <td>Modern color displays</td>
            </tr>
            <tr>
                <td><code>1</code></td>
                <td>2 colors (black/white)</td>
                <td>Simple e-ink readers</td>
            </tr>
            <tr>
                <td><code>2</code></td>
                <td>4 shades</td>
                <td>Early e-ink</td>
            </tr>
            <tr>
                <td><code>4</code></td>
                <td>16 shades</td>
                <td>Grayscale displays</td>
            </tr>
            <tr>
                <td><code>8</code></td>
                <td>256 shades</td>
                <td>Advanced e-ink, medical displays</td>
            </tr>
        </table>

        <h3>orientation Values</h3>
        <table class="reference-table">
            <tr>
                <th>Value</th>
                <th>Condition</th>
                <th>Visual</th>
            </tr>
            <tr>
                <td><code>portrait</code></td>
                <td>Height ≥ Width</td>
                <td>Vertical rectangle</td>
            </tr>
            <tr>
                <td><code>landscape</code></td>
                <td>Width > Height</td>
                <td>Horizontal rectangle</td>
            </tr>
        </table>
    </section>

    <!-- ====== 6. BEST PRACTICES ====== -->
    <section>
        <h2>6. Best Practices</h2>

        <div style="background: #d4edda; padding: 20px; border-radius: 8px; border-left: 4px solid #28a745;">
            <h3 style="margin-top: 0; color: #155724;">✅ Do This:</h3>
            <ul>
                <li>Use <code>orientation</code> to adapt layouts for portrait vs. landscape</li>
                <li>Use <code>monochrome</code> to provide grayscale fallbacks for specialized devices</li>
                <li>Combine <code>orientation</code> with <code>max-height</code> for mobile landscape warnings</li>
                <li>Test on real devices in both orientations</li>
                <li>Use <code>monochrome: 0</code> for modern color devices</li>
                <li>Provide meaningful content even on monochrome devices</li>
            </ul>
        </div>

        <div style="background: #f8d7da; padding: 20px; border-radius: 8px; border-left: 4px solid #dc3545; margin-top: 15px;">
            <h3 style="margin-top: 0; color: #721c24;">❌ Don't Do This:</h3>
            <ul>
                <li>Don't rely on orientation alone for responsive design</li>
                <li>Don't assume all users have color displays</li>
                <li>Don't forget about mobile landscape (short height)</li>
                <li>Don't use monochrome for critical functionality — use it for enhancements</li>
                <li>Don't confuse viewport orientation with device orientation</li>
            </ul>
        </div>
    </section>

    <!-- ====== LIVE INDICATOR ====== -->
    <div class="live-indicator" id="live-indicator">
        <span id="indicator-orientation">Orientation: —</span>
        <span class="detail" id="indicator-monochrome">Monochrome: —</span>
    </div>

    <!-- ====== SCRIPT FOR DETECTION ====== -->
    <script>
        function updateIndicators() {
            // Monochrome detection
            const monoAny = document.getElementById('mono-any');
            const mono0 = document.getElementById('mono-0');
            const monoMin1 = document.getElementById('mono-min-1');

            const isMonochrome = window.matchMedia('(monochrome)').matches;
            const isMonochrome0 = window.matchMedia('(monochrome: 0)').matches;
            const isMinMono1 = window.matchMedia('(min-monochrome: 1)').matches;

            if (isMonochrome) {
                monoAny.querySelector('.value').textContent = 'Monochrome ✅';
                monoAny.style.background = '#e9ecef';
                monoAny.style.borderColor = '#333';
                monoAny.querySelector('.value').style.color = '#333';
            } else {
                monoAny.querySelector('.value').textContent = 'Not monochrome';
                monoAny.style.background = '#e9ecef';
                monoAny.style.borderColor = '#6c757d';
                monoAny.querySelector('.value').style.color = '#6c757d';
            }

            if (isMonochrome0) {
                mono0.querySelector('.value').textContent = 'Color device ✅';
                mono0.style.background = '#d4edda';
                mono0.style.borderColor = '#28a745';
                mono0.querySelector('.value').style.color = '#28a745';
            } else {
                mono0.querySelector('.value').textContent = 'Monochrome';
                mono0.style.background = '#e9ecef';
                mono0.style.borderColor = '#6c757d';
                mono0.querySelector('.value').style.color = '#6c757d';
            }

            if (isMinMono1) {
                monoMin1.querySelector('.value').textContent = '≥ 1 bpp ✅';
                monoMin1.style.background = '#e9ecef';
                monoMin1.style.borderColor = '#333';
                monoMin1.querySelector('.value').style.color = '#333';
            } else {
                monoMin1.querySelector('.value').textContent = 'Not detected';
                monoMin1.style.background = '#e9ecef';
                monoMin1.style.borderColor = '#6c757d';
                monoMin1.querySelector('.value').style.color = '#6c757d';
            }

            // Orientation detection
            const orientPortrait = document.getElementById('orient-portrait');
            const orientLandscape = document.getElementById('orient-landscape');
            const indicator = document.getElementById('live-indicator');
            const indicatorOrientation = document.getElementById('indicator-orientation');
            const indicatorMonochrome = document.getElementById('indicator-monochrome');

            const isPortrait = window.matchMedia('(orientation: portrait)').matches;
            const isLandscape = window.matchMedia('(orientation: landscape)').matches;

            if (isPortrait) {
                orientPortrait.querySelector('.value').textContent = 'Active ✅';
                orientPortrait.style.background = '#ff6b6b';
                orientPortrait.style.borderColor = '#c92a2a';
                orientPortrait.querySelector('.value').style.color = 'white';

                orientLandscape.querySelector('.value').textContent = 'Inactive';
                orientLandscape.style.background = '#e9ecef';
                orientLandscape.style.borderColor = '#6c757d';
                orientLandscape.querySelector('.value').style.color = '#6c757d';

                indicatorOrientation.textContent = '📱 Portrait';
                indicator.style.background = '#ff6b6b';
                indicator.style.color = 'white';
            } else if (isLandscape) {
                orientLandscape.querySelector('.value').textContent = 'Active ✅';
                orientLandscape.style.background = '#28a745';
                orientLandscape.style.borderColor = '#1e7e34';
                orientLandscape.querySelector('.value').style.color = 'white';

                orientPortrait.querySelector('.value').textContent = 'Inactive';
                orientPortrait.style.background = '#e9ecef';
                orientPortrait.style.borderColor = '#6c757d';
                orientPortrait.querySelector('.value').style.color = '#6c757d';

                indicatorOrientation.textContent = '🖥️ Landscape';
                indicator.style.background = '#28a745';
                indicator.style.color = 'white';
            }

            // Update monochrome indicator
            if (isMonochrome) {
                indicatorMonochrome.textContent = 'Monochrome: Yes';
            } else {
                indicatorMonochrome.textContent = 'Monochrome: No (Color)';
            }
        }

        window.addEventListener('resize', updateIndicators);
        window.addEventListener('load', updateIndicators);
        window.addEventListener('orientationchange', updateIndicators);

        // Listen for changes
        window.matchMedia('(orientation: portrait)').addEventListener('change', updateIndicators);
        window.matchMedia('(monochrome)').addEventListener('change', updateIndicators);

        updateIndicators();
    </script>

</body>
</html>

Quick Reference

Feature	Description	Values
`monochrome`	Bits per pixel on monochrome devices	Integer (0, 1, 8)
`orientation`	Portrait or landscape	`portrait`, `landscape`

monochrome Values

Feature	Description	Example
`monochrome`	Any monochrome device	`@media (monochrome)`
`monochrome: 0`	Non-monochrome device	`@media (monochrome: 0)`
`min-monochrome: 1`	At least 1 bpp	`@media (min-monochrome: 1)`
`max-monochrome: 8`	At most 8 bpp	`@media (max-monochrome: 8)`

Bits per Pixel

Bits per Pixel	Description	Device Example
`0`	Not monochrome	Modern color displays
`1`	2 colors	Simple e-ink readers
`2`	4 shades	Early e-ink
`4`	16 shades	Grayscale displays
`8`	256 shades	Advanced e-ink, medical displays

orientation Values

Value	Condition	Visual
`portrait`	Height ≥ Width	Vertical rectangle
`landscape`	Width > Height	Horizontal rectangle

Best Practices

✅ Do This:

/* Adapt layout for orientation */
@media screen and (orientation: portrait) {
    .container {
        flex-direction: column;
    }
}

@media screen and (orientation: landscape) {
    .container {
        flex-direction: row;
    }
}

/* Mobile landscape warning */
@media screen and (orientation: landscape) and (max-height: 500px) {
    .warning {
        display: block;
    }
}

/* Monochrome fallback */
@media (monochrome) {
    .image {
        filter: grayscale(100%);
    }
}

❌ Don’t Do This:

/* Don't rely on orientation alone */
@media (orientation: portrait) {
    /* Use width/height for more precise control */
}

/* Don't assume all users have color displays */
.chart {
    color: #ff0000; /* May not be visible on monochrome */
}

/* Don't forget mobile landscape */
/* A phone in landscape has a very short viewport height */

Pro Tip: orientation is essential for responsive design — mobile users frequently rotate their devices, and layouts should adapt accordingly. Use it to switch between vertical and horizontal layouts, and combine it with max-height to detect mobile landscape mode (where the viewport is very short). monochrome is for specialized devices — e-ink readers, braille displays, and medical monitors. Most modern devices match monochrome: 0 (color). Always provide meaningful content regardless of color capability!

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!