Simple and powerful breakpoints for styled components and emotion.
-
Updated
Jul 9, 2024 - JavaScript
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)_
Simple and powerful breakpoints for styled components and emotion.
Work Store Place
A react table application that contains users' names, surnames, e-mails, ages and some transactions, which can be searched in the table, and is also optimized for other devices.
PostCSS plugin to extract matched media queries to their parents
CSS Element-Queries aka Container Queries. High-speed element dimension/media queries in valid css.
Home assignment for the Html and CSS
Determine actual CSS media query breakpoints via JavaScript
💅 Helps manage media queries with styled components
This is a solo react web application. In this web application you can search for weather app of city you want. In main screen you will see a box of content in which you will see three sides at top navbar, at left city detail box and at right week details.
JavaScript analog of Bootstrap SCSS media breakpoints mixins.
react use-media-query-hook
🎠 A super media-query for styled-components. Intuitive and easy of use.
A really lightweight CSS media query component for React.
A PostCSS plugin and Javascript runtime combination, which allows you to write container queries in your CSS the same way you would write media queries.
This is Web Apps for Bots. Telegram bots can completely replace any website. "With Web Apps, bots get a whole new dimension. Bot developers can create infinitely flexible interfaces with JavaScript, the most widely used programming language in the world."
YouTube is an online video sharing and social media platform.
This site was created for the SYRDARYA SANITARY EPIDIMIOLOGICAL PEACE AND COMMUNITY ASSOCIATION. I worked this site with admin panel
Trips-List✈. This is a flexible website. Shows a list of trips. If there is an error from the API, the try catch error will pass to the user in the throw position. Functions work waiting for each other, ie in async await mode.
Even simpler usage of react-responsive package!
Created by Håkon Wium Lie, W3C
Released June 19, 2012