media-query
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:
- conditionally apply styles with the CSS
@media
and@import
at-rules
- target specific media for the
<style>
,<link>
,<source>
, and other HTML elements with themedia=
attribute
- test and monitor media states using the
Window.matchMedia()
andEventTarget.addEventListener()
methods
A 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.
- Media types define the broad category of device for which the media query applies. The type is optional except when using the not or only 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.
- Media features describe a specific characteristic of the user agent, output device, or environment. Media Queries Level 4 groups 18 media features into 5 categories.
* **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)_
- Logical operators can be used to compose a complex media query: not, and, and only. You can also combine multiple media queries into a single rule by separating them with commas.
Here are 150 public repositories matching this topic...
Simple and powerful breakpoints for styled components and emotion.
-
Updated
May 29, 2024 - JavaScript
This is a Responsive Webpage, check it on Mobile phone.
-
Updated
May 19, 2024 - CSS
React made responsible - media queries backed by state machinery
-
Updated
May 12, 2024 - TypeScript
This is a clone of Netflix (front-end) built using the concepts of HTML and Vanilla CSS. It is a properly responsive clone achievable with the assistance of CSS Media Queries.
-
Updated
May 1, 2024 - HTML
Final-Task-Responsive-Course
-
Updated
Apr 23, 2024 - HTML
Solution to the Social links profile challenge on Frontend Mentor(https://www.frontendmentor.io/challenges/social-links-profile-UG32l9m6dQ).
-
Updated
Apr 3, 2024 - HTML
It's my Day-13 of #100dayscodingchallenge I created this Fully Animated & Responsive WhatGym site with HTML CSS Javascript. Clone of SidCup Golf site. Must checkout: 👇
-
Updated
Mar 29, 2024 - CSS
Work Store Place
-
Updated
Mar 15, 2024 - JavaScript
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.
-
Updated
Mar 10, 2024 - JavaScript
SCSS function responsive-value. It is intended to handle responsive CSS property values without using media queries.
-
Updated
Feb 29, 2024 - SCSS
Repository Submission Final Project Dicoding Kelas Belajar Dasar Pemrograman Web Rating 5 ( Silahkan buat referensi namun jangan plagiarisme ya )
-
Updated
Feb 6, 2024 - CSS
Stateful hook that uses the matchMedia API.
-
Updated
Jan 31, 2024 - TypeScript
Repositório contendo os arquivos do Projeto Login, criado pelo @gustavoguanabara, no capítulo 26 do curso de HTML5 e CSS3 do Curso em Vídeo. Seu objetivo foi colocar em prática todos os conhecimentos adquiridos no Módulo 4, adicionando ao site as media queries e os formulários.
-
Updated
Dec 27, 2023 - CSS
E-commerce site made using Django and Javascript
-
Updated
Dec 18, 2023 - HTML
-
Updated
Nov 26, 2023 - CSS
Frontend Mentor | Clipboard landing page challenge
-
Updated
Nov 5, 2023 - CSS
A CSS technique that helps developers avoid ugly layout jumps while users resize their browsers.
-
Updated
Nov 5, 2023 - TypeScript
A ✨light✨ and magical Svelte component for CSS media queries🐹
-
Updated
Oct 13, 2023 - TypeScript
Created by Håkon Wium Lie, W3C
Released June 19, 2012
- Followers
- 5 followers
- Website
- drafts.csswg.org/mediaqueries
- Wikipedia
- Wikipedia