A landing page about educational techniques and statistics in teaching.
-
Updated
May 10, 2024 - Pug
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)_
A landing page about educational techniques and statistics in teaching.
Logical Operations Home page Clone
Testimonials section with grid layout , using React and some media queries
Svelte component and helper functions for creating easy responsive layouts with CSS media queries.
Simple and powerful breakpoints for styled components and emotion.
Minimalist warehouse management & presentation system frontend for Photon Pictures at UIUC
Match Game is a fun and challenging game where you match images within categories. Score points, beat the timer, and enjoy multiple rounds. Play again to reset scores and categories for endless fun!
📸 Sliding action script
A landing page about Traveling in Russia.
Testimonials grid section build with HTML CSS
Presenting fully responsive Netflix Clone Website Application. Experience seamless access to movie details sourced from The Movie Database (TMDB) API. Seamlessly integrated user authentication through Firebase allows users to create accounts & login. Utilizing Firestore db for secure storage of user login information for smooth browsing experiences
A Blackjack game developed with JavaScript, featuring responsive design and intuitive gameplay, perfect for browser-based entertainment.
Four Card feature section build with HTML and CSS
React Dubai Landscapes Website - AdTrak Fictional Demonstration
I created this layout for practicing CSS Media Queries
Neste curso, você vai aprender a usar CSS para fazer suas páginas ficarem bonitas, não importa em qual dispositivo elas estão sendo visualizadas.
Front End, HTML, Tags, Acessibilidade, CSS, Grid Layout, Flexbox, Media Queries, Responsivo, VS Code e mais.
Created by Håkon Wium Lie, W3C
Released June 19, 2012