An afternoon project to help solidify media query concepts by cloning a live website.
-
Updated
Jun 24, 2020
Media Queries are a way to target browsers by certain characteristics, features, and user preferences, then apply styles, or run other code based on those things. They are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse. Media queries are used for the following:
@media
and @import
at-rules<style>
, <link>
, <source>
, and other HTML elements with the media=
attributeWindow.matchMedia()
and EventTarget.addEventListener()
methodsA media query is composed of an optional media type and any number of media feature expressions, which may optionally be combined in various ways using logical operators.
* **all:** Suitable for all devices.
* **print:** Intended for paged material and documents viewed on a screen in print preview mode.
* **screen:** Intended primarily for screens.
* **Viewport/Page Characteristics**
* **Display Quality**
* **Color**
* **Interaction**
* **Video-prefixed:** The spec references user agents, including TVs, that render video and graphics in two separate planes that each have their own characteristics. _(upcoming Media Queries Level 5)_
An afternoon project to help solidify media query concepts by cloning a live website.
A plugin for PostCSS that generates viewport units (vw, vh, vmin, vmax) from pixel units. The best choice to create a scalable interface on different displays by one design size.
A custom element that allows you to easily put a Dark Mode 🌒 toggle or switch on your site:
An SSR compatible approach to CSS media query based responsive layouts for React.
A single page static website template for a startup company.
🎉 React library to render components only on specific viewports 🔥
Slice media queries with ease
Simple and powerful breakpoints for styled components and emotion.
Style React Native components using CSS, PostCSS, Sass, Less or Stylus.
一款 PostCSS 插件,将固定尺寸的视图转为可跟随宽度变化而等比例伸缩的视图。To adapt different displays by one mobile viewport.
📸 Sliding action script
A simple, tiny alternative to element/container queries
Reproduire une maquette relativement basique en utilisant les media-queries
Movies-streaming-webapp
Extremely powerful Sass media query mixin. Allows you to create almost any media query you can imagine.
ifbreakpoint.js : if Bootstrap 4 breakpoint (media query) is X do something
🌈 Define custom viewports for your Nuxt project
This repository contains the src code for an android app called, "Movie Box." With this app, you can search, browse and save your favorite movies on your device.
Created by Håkon Wium Lie, W3C
Released June 19, 2012