Skip to main content
SimilarExport ZIP
100%

CSS Media Queries for Desktop, Tablet, Mobile.

✓ Published0🌍 Public
MMistyBlunch
Last edited Mar 9, 2018
Created on Mar 9, 2018

This example maps out CSS Media Query breakpoints for desktop, tablet, and mobile screen sizes, using plain CSS within a gist by MistyBlunch. It shows how `@media` rules with `min-width` and `max-width` conditions segment the viewport into device-specific ranges, from high-resolution desktops (1281px and up) down to smartphones (320px to 480px). The code also demonstrates an `orientation: landscape` variant for tablets. No external libraries or data sources appear; it relies solely on native CSS syntax to define responsive behavior at each width threshold.

AI-generated description

Similar vizzes

Loading thumbnail…

Minimal reponsive javascript framework

This example demonstrates a responsive design framework that switches between mobile, tablet, and desktop states based on the browser window's width. It uses jQuery to listen for window resize events, comparing the document width against breakpoints of 768 and 1100 pixels. The code triggers custom 'MOBILE', 'TABLET', and 'DESKTOP' events on the document, attaching show/hide functions to these states via the jQuery `live` API. A 200-millisecond timer minimizes lag during resizing.

SSimonS
67% match
Loading thumbnail…

Gist c196418fe72b707e3082568ad77439cc

This example demonstrates a responsive CSS grid system built with Sass, showing how column widths, ordering, visibility, and alignment adapt across five breakpoints (xl, lg, md, sm, xs). The layout defines 12-column proportional widths, auto-sizing columns, and utility classes for hiding, showing, and reordering content. It uses Sass `@each` loops and `@media` queries to generate breakpoint-specific styles, with variables like `$size-xl` and `$grid-spacing` controlling the responsive behavior. The grid container adjusts its max-width based on each breakpoint value.

SSamuelRiversMoore
66% match
Loading thumbnail…

Gist fa954043cfef0a0c69112a156ff518c2

This example is a CSS code snippet that addresses a mobile browser viewport bug. The code demonstrates a workaround for iPhones where the CSS `100vh` unit incorrectly calculates the viewport height, failing to account for the browser's bottom menu overlay. The fix is implemented by declaring a `min-height` property twice on the `body` element: first with the standard `100vh` value, and then with the `-webkit-fill-available` value for WebKit-based browsers. Additionally, the `html` element receives a `height` of `-webkit-fill-available` to ensure full-page coverage.

KKopylovVitalik
64% match
Loading thumbnail…

SCSS cheat sheet

This example presents a SCSS cheat sheet as a source-code reference, showing syntax for imports, variables, nesting, mixins, and media queries. The code includes predefined color variables like `$dmn-blue`, uses `lighten()` to adjust shades, and demonstrates `@mixin` definitions for reusable styles such as `body-copy-style` and `rounded`. It also illustrates selector nesting with the `&:hover` parent reference and responsive design via `@media` rules keyed to width variables. The gist by LayneSmith serves as the data source, rendered directly as formatted code.

LLayne Smith
60% match
Loading thumbnail…

Title here

This example tests browser support for coarse and fine pointer media queries. It displays the boolean results of `pointer: coarse`, `any-pointer: coarse`, `pointer: fine`, and `any-pointer: fine` as headings using D3 v5. The code uses `window.matchMedia` to assess the user’s primary and any input device, and dynamically loads D3 based on browser compatibility.

GGerardoFurtado
57% match
Loading thumbnail…

Base CSS document with google fonts, Eric Meyer's reset.css, Ethan Schoonover's solarized palette and some basic responsive code.

This example demonstrates a clean, typography-focused HTML/CSS foundation for a data-visualization project. It imports the "Roboto Slab" and "Exo 2" fonts via Google Fonts, resets default browser styling with Eric Meyer's reset.css, and applies Ethan Schoonover's Solarized color palette. The code uses standard CSS properties, including a responsive `.container` class with a media query for narrow screens, and sets up basic typography and spacing for a chart area. It does not implement any JavaScript or dynamic visualizations, serving only as a base stylesheet for future graphical work.

AAbsarF
57% match
Loading thumbnail…

if isMobile

This example demonstrates a simple branching interaction that checks whether a user is on a touch-enabled device. It shows a plain JavaScript conditional statement that executes one block of code if `isMobile` evaluates to true, and a different block otherwise. The code relies on the `ontouchstart` and `onmsgesturechange` window properties to detect touch capability, assigning the result to a variable. No visualization libraries or data sources are used; the example is purely a logic skeleton for responsive behavior.

LLayne Smith
56% match
Loading thumbnail…

test css

This example demonstrates responsive scaling of an inline SVG graphic and an embedded iframe using CSS media queries. The SVG text element, styled with the Roboto font, is paired with an absolute-positioned iframe that sits behind it. Through breakpoints at various viewport widths, the code adjusts the SVG’s width and padding, along with the iframe’s dimensions, to maintain a consistent layout. It uses plain HTML, CSS, and inline SVG, with no external JavaScript libraries or data sources.

Ssirenajbpearl@gmail.com
55% match